@genexus/genexus-ide-ui 1.0.38 → 1.0.40

package/dist/collection/components/ai-assistant/ai-message.js.map

@@ -1 +1 @@
-{"version":3,"file":"ai-message.js","sourceRoot":"","sources":["../../../src/components/ai-assistant/ai-message.tsx"],"names":[],"mappings":"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","sourcesContent":["/* STENCIL IMPORTS */\nimport { Component, h, Prop, Element, State } from \"@stencil/core\";\n/* OTHER LIBRARIES IMPORTS */\nimport { getIconPath } from \"@genexus/mercury\";\n/* CUSTOM IMPORTS */\nimport { Locale } from \"../../common/locale\";\nimport { MessageType } from \"./ai-assistant\";\nimport { hiChar } from \"../../common/helpers\";\n\nconst COPY_ICON = getIconPath({\n  category: \"bpm\",\n  name: \"tasks\",\n  colorType: \"neutral\"\n});\n@Component({\n  tag: \"gx-ide-ai-message\",\n  styleUrl: \"ai-message.scss\",\n  shadow: false,\n  assetsDirs: [\"gx-ide-assets/ai-message\"]\n})\nexport class GxIdeAiMessage {\n  /*\nINDEX:\n1.OWN PROPERTIES \n2.REFERENCE TO ELEMENTS\n3.STATE() VARIABLES\n4.PUBLIC PROPERTY API | WATCH'S\n5.EVENTS (EMIT)\n6.COMPONENT LIFECYCLE METHODS\n7.LISTENERS\n8.PUBLIC METHODS API\n9.LOCAL METHODS\n10.RENDER() FUNCTION\n*/\n\n  // 1.OWN PROPERTIES //\n\n  /* The message allows to be copied*/\n  private _componentLocale: any;\n  private copyable = false;\n\n  // 2. REFERENCE TO ELEMENTS //\n\n  @Element() el: HTMLGxIdeAiMessageElement;\n\n  // 3.STATE() VARIABLES //\n\n  /**\n   * This wil display the message if true\n   */\n  @State() visible = false;\n\n  /**\n   * This wil show the user a text, indicating that the message has been copied\n   */\n  @State() showCopiedMessage = false;\n\n  // 4.PUBLIC PROPERTY API | WATCH'S //\n\n  /**\n   * The actual message\n   */\n  @Prop() readonly message: string;\n\n  /**\n   * The message type\n   */\n  @Prop() readonly messageType: MessageType;\n\n  /**\n   * The filter value\n   */\n  @Prop() readonly filterValue: string;\n\n  /**\n   * It hides the message (used for the filter)\n   */\n  @Prop() readonly hidden: boolean;\n\n  /**\n   * An object with the needed string translations.\n   */\n  @Prop() readonly translations: Translations;\n\n  // 5.EVENTS (EMIT) //\n\n  // 6.COMPONENT LIFECYCLE METHODS //\n\n  async componentWillLoad() {\n    this._componentLocale = await Locale.getComponentStrings(this.el);\n    this.evaluateMessageIsCopyable();\n  }\n\n  componentDidRender() {\n    setTimeout(() => {\n      /* Without the timeout it appears instantly (no apparent transition)*/\n      this.visible = true;\n      const messagesList = this.el.parentElement;\n      messagesList.scrollTo(0, 0);\n    }, 0);\n  }\n\n  // 7.LISTENERS //\n\n  // 8.PUBLIC METHODS API //\n\n  // 9.LOCAL METHODS //\n\n  private copyMessage = () => {\n    const messageInfo = JSON.stringify(\n      {\n        messageType: this.messageType,\n        message: this.message\n      },\n      null,\n      2\n    );\n\n    navigator.clipboard.writeText(messageInfo);\n    this.showCopiedMessage = true;\n    setTimeout(() => {\n      this.showCopiedMessage = false;\n    }, 1500);\n  };\n\n  private evaluateMessageIsCopyable = () => {\n    this.copyable = this.messageType !== \"assistant-in-progress\";\n  };\n\n  private evaluateCopyIcon = () => {\n    return this.copyable ? (\n      <ch-image class=\"icon-md\" src={COPY_ICON}></ch-image>\n    ) : null;\n  };\n\n  // 10.RENDER() FUNCTION //\n\n  render() {\n    return (\n      <li\n        class={{\n          \"message\": true,\n          \"message--visible\": this.visible && !this.hidden,\n          [`message--${[this.messageType]}`]: true,\n          \"message--assistant\": this.messageType !== \"user\",\n          \"message--copyable\": this.copyable,\n          \"message--copying\": this.showCopiedMessage\n        }}\n        onClick={this.copyable && this.copyMessage}\n      >\n        <div class=\"message__outer-wrapper\">\n          <div\n            class={{\n              \"message__inner-wrapper\": true\n            }}\n          >\n            {this.messageType === \"user\" ? (\n              <div class=\"message__header\">\n                <span class=\"message__role message__role--user\">\n                  {this._componentLocale.you}\n                </span>\n                {this.evaluateCopyIcon()}\n              </div>\n            ) : (\n              <div class=\"message__header\">\n                <span\n                  class={{\n                    \"message__role\":\n                      this.messageType !== \"assistant-in-progress\",\n                    \"message__role--hidden\":\n                      this.messageType === \"assistant-in-progress\",\n                    \"message__role--assistant\": true\n                  }}\n                >\n                  {this._componentLocale.assistant}\n                </span>\n                {this.evaluateCopyIcon()}\n              </div>\n            )}\n            <div\n              class={{\n                \"message__caption\": true,\n                \"message__caption--in-progress\":\n                  this.messageType === \"assistant-in-progress\"\n              }}\n            >\n              {this.showCopiedMessage ? (\n                <span class=\"copied\">\n                  <ch-image class=\"icon-md\" src={COPY_ICON}></ch-image>\n                  {this.translations[\"copied\"]}\n                </span>\n              ) : null}\n              {hiChar(this.message, this.filterValue)}\n            </div>\n            {this.messageType === \"assistant-in-progress\" ? (\n              <div class=\"animation-wrapper\">\n                <div class=\"dot-pulse\"></div>\n              </div>\n            ) : null}\n          </div>\n        </div>\n      </li>\n    );\n  }\n}\n\nexport type Translations = {\n  [key: string]: string;\n};\n"]}
+{"version":3,"file":"ai-message.js","sourceRoot":"","sources":["../../../src/components/ai-assistant/ai-message.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Element, State } from \"@stencil/core\";\n\nimport { getIconPath } from \"@genexus/mercury\";\n\nimport { Locale } from \"../../common/locale\";\nimport { MessageType } from \"./ai-assistant\";\nimport { hiChar } from \"../../common/helpers\";\n\nconst COPY_ICON = getIconPath({\n  category: \"bpm\",\n  name: \"tasks\",\n  colorType: \"neutral\"\n});\n\n@Component({\n  tag: \"gx-ide-ai-message\",\n  styleUrl: \"ai-message.scss\",\n  shadow: false,\n  assetsDirs: [\"gx-ide-assets/ai-message\"]\n})\nexport class GxIdeAiMessage {\n  /* The message allows to be copied*/\n  private _componentLocale: any;\n  private copyable = false;\n\n  @Element() el: HTMLGxIdeAiMessageElement;\n\n  /**\n   * This wil display the message if true\n   */\n  @State() visible = false;\n\n  /**\n   * This wil show the user a text, indicating that the message has been copied\n   */\n  @State() showCopiedMessage = false;\n\n  /**\n   * A reference to the gx-ide-ai-assistant host element\n   */\n  @Prop() readonly aiAssistantHostRef: HTMLGxIdeAiAssistantElement;\n\n  /**\n   * The actual message\n   */\n  @Prop() readonly message: string;\n\n  /**\n   * The message type\n   */\n  @Prop() readonly messageType: MessageType;\n\n  /**\n   * The filter value\n   */\n  @Prop() readonly filterValue: string;\n\n  /**\n   * It hides the message (used for the filter)\n   */\n  @Prop() readonly hidden: boolean;\n\n  /**\n   * An object with the needed string translations.\n   */\n  @Prop() readonly translations: Translations;\n\n  async componentWillLoad() {\n    this._componentLocale = await Locale.getComponentStrings(this.el);\n    this.evaluateMessageIsCopyable();\n  }\n\n  componentDidRender() {\n    setTimeout(() => {\n      /* Without the timeout it appears instantly (no apparent transition)*/\n      this.visible = true;\n      const messagesList = this.el.parentElement;\n      messagesList.scrollTo(0, 0);\n    }, 0);\n  }\n\n  private copyMessage = () => {\n    const messageInfo = JSON.stringify(\n      {\n        messageType: this.messageType,\n        message: this.message\n      },\n      null,\n      2\n    );\n\n    navigator.clipboard.writeText(messageInfo);\n    this.showCopiedMessage = true;\n    setTimeout(() => {\n      this.showCopiedMessage = false;\n    }, 1500);\n  };\n\n  #buttonMouseDownHandler = (e: MouseEvent) => {\n    e.preventDefault();\n    e.stopPropagation();\n  };\n\n  private evaluateMessageIsCopyable = () => {\n    this.copyable = this.messageType !== \"assistant-in-progress\";\n  };\n\n  private evaluateCopyIcon = () => {\n    return this.copyable ? (\n      <button\n        class=\"button-tertiary button-icon-only\"\n        aria-label=\"copy\"\n        onClick={this.copyMessage}\n        onMouseDown={this.#buttonMouseDownHandler}\n      >\n        <ch-image class=\"icon-md\" src={COPY_ICON}></ch-image>\n      </button>\n    ) : null;\n  };\n\n  render() {\n    return (\n      <li\n        class={{\n          \"message\": true,\n          \"message--visible\": this.visible && !this.hidden,\n          [`message--${[this.messageType]}`]: true,\n          \"message--assistant\": this.messageType !== \"user\",\n          \"message--copyable\": this.copyable,\n          \"message--copying\": this.showCopiedMessage\n        }}\n      >\n        <div class=\"message__outer-wrapper\">\n          <div\n            class={{\n              \"message__inner-wrapper\": true\n            }}\n          >\n            {this.messageType === \"user\" ? (\n              <div class=\"message__header\">\n                <span class=\"message__role message__role--user\">\n                  <span class=\"message__role-description\">\n                    {this._componentLocale.you}\n                  </span>\n                </span>\n                {this.evaluateCopyIcon()}\n              </div>\n            ) : (\n              <div\n                class={{\n                  \"message__header\": true,\n                  \"message__header--in-progress\":\n                    this.messageType === \"assistant-in-progress\"\n                }}\n              >\n                <span\n                  class={{\n                    \"message__role\":\n                      this.messageType !== \"assistant-in-progress\",\n                    \"message__role--hidden\":\n                      this.messageType === \"assistant-in-progress\",\n                    \"message__role--assistant\": true\n                  }}\n                >\n                  <span class=\"message__role-description\">\n                    {this._componentLocale.assistant}\n                  </span>\n                </span>\n                {this.evaluateCopyIcon()}\n              </div>\n            )}\n            <div\n              class={{\n                \"message__caption\": true,\n                \"message__caption--in-progress\":\n                  this.messageType === \"assistant-in-progress\"\n              }}\n            >\n              {this.showCopiedMessage ? (\n                <span class=\"copied\">\n                  <ch-image class=\"icon-md\" src={COPY_ICON}></ch-image>\n                  {this.translations[\"copied\"]}\n                </span>\n              ) : null}\n              {hiChar(this.message, this.filterValue)}\n            </div>\n            {this.messageType === \"assistant-in-progress\" ? (\n              <div class=\"animation-wrapper\">\n                <div class=\"dot-pulse\"></div>\n              </div>\n            ) : null}\n          </div>\n        </div>\n      </li>\n    );\n  }\n}\n\nexport type Translations = {\n  [key: string]: string;\n};\n"]}

package/dist/collection/components/current-user-info/current-user-info.css

@@ -37,6 +37,13 @@
   font-size: var(--mer-font__size--4xs);
   color: var(--mer-text__neutral);
 }
+.user-login__name, .user-login__organization {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-inline-size: 120px;
+  display: inline-block;
+}
 .user-login__avatar {
   font-size: 9px;
   flex: 0 0 auto;

package/dist/collection/components/current-user-info/current-user-info.js

@@ -19,7 +19,7 @@ var _GxIdeNewEnvironment_componentLocale, _GxIdeNewEnvironment_initials, _GxIdeN
 import { Host, h } from "@stencil/core";
 import { getIconPath } from "@genexus/mercury";
 import { Locale } from "../../common/locale";
-import { getInitialsFromName } from "./helpers";
+import { getInitialsFromName, limitFullName } from "./helpers";
 const CSS_BUNDLES = [
     // TODO: review if "utils/form--full" is required.
     "resets/box-sizing",
@@ -104,7 +104,9 @@ export class GxIdeNewEnvironment {
         ], "f");
     }
     render() {
-        return (h(Host, { class: "widget" }, h("ch-theme", { model: CSS_BUNDLES }), h("ch-dropdown-render", { class: "dropdown", model: __classPrivateFieldGet(this, _GxIdeNewEnvironment_menuDropdownModel, "f"), position: "InsideEnd_OutsideEnd", itemClickCallback: __classPrivateFieldGet(this, _GxIdeNewEnvironment_dropDownitemClickHandler, "f") }, h("button", { class: "user-login__button", ref: el => (__classPrivateFieldSet(this, _GxIdeNewEnvironment_userLoginButton, el, "f")), slot: "action" }, h("div", { class: "user-login__details" }, h("span", { class: "user-login__name" }, this.userInfo.name), h("span", { class: "user-login__organization" }, this.userInfo.team)), h("div", { class: "user-login__avatar" }, __classPrivateFieldGet(this, _GxIdeNewEnvironment_initials, "f")), h("ch-image", { src: CHEVRON_DOWN_ICON, class: "icon-md", containerRef: __classPrivateFieldGet(this, _GxIdeNewEnvironment_userLoginButton, "f") })), h("div", { class: "user-login__footer footer-slot", slot: "footer" }, h("p", { class: "text-body-regular-s privacy-policy", onClick: this.showTermsCallback }, __classPrivateFieldGet(this, _GxIdeNewEnvironment_componentLocale, "f").privacyAndTerms)))));
+        var _a, _b;
+        const userName = limitFullName((_a = this.userInfo) === null || _a === void 0 ? void 0 : _a.name);
+        return (h(Host, { class: "widget" }, h("ch-theme", { model: CSS_BUNDLES }), h("ch-dropdown-render", { class: "dropdown", model: __classPrivateFieldGet(this, _GxIdeNewEnvironment_menuDropdownModel, "f"), position: "InsideEnd_OutsideEnd", itemClickCallback: __classPrivateFieldGet(this, _GxIdeNewEnvironment_dropDownitemClickHandler, "f") }, h("button", { class: "user-login__button", ref: el => (__classPrivateFieldSet(this, _GxIdeNewEnvironment_userLoginButton, el, "f")), slot: "action" }, h("div", { class: "user-login__details" }, userName ? (h("span", { class: "user-login__name" }, userName)) : null, ((_b = this.userInfo) === null || _b === void 0 ? void 0 : _b.team) ? (h("span", { class: "user-login__organization" }, this.userInfo.team)) : null), h("div", { class: "user-login__avatar" }, __classPrivateFieldGet(this, _GxIdeNewEnvironment_initials, "f")), h("ch-image", { src: CHEVRON_DOWN_ICON, class: "icon-md", containerRef: __classPrivateFieldGet(this, _GxIdeNewEnvironment_userLoginButton, "f") })), h("div", { class: "user-login__footer footer-slot", slot: "footer" }, h("p", { class: "text-body-regular-s privacy-policy", onClick: this.showTermsCallback }, __classPrivateFieldGet(this, _GxIdeNewEnvironment_componentLocale, "f").privacyAndTerms)))));
     }
     static get is() { return "gx-ide-current-user-info"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/current-user-info/current-user-info.js.map

@@ -1 +1 @@
-{"version":3,"file":"current-user-info.js","sourceRoot":"","sources":["../../../src/components/current-user-info/current-user-info.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,qBAAqB;AACrB,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAEzE,OAAO,EAAE,WAAW,EAAkB,MAAM,kBAAkB,CAAC;AAE/D,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,mBAAmB,EAAE,MAAM,WAAW,CAAC;AAGhD,MAAM,WAAW,GAAmB;IAClC,kDAAkD;IAClD,mBAAmB;IACnB,oBAAoB;IACpB,mBAAmB;IACnB,iBAAiB;IACjB,qBAAqB;IACrB,cAAc;IACd,kBAAkB;IAClB,eAAe;IACf,qBAAqB;CACtB,CAAC;AAEF,MAAM,iBAAiB,GAAG,WAAW,CAAC;IACpC,QAAQ,EAAE,YAAY;IACtB,IAAI,EAAE,cAAc;IACpB,SAAS,EAAE,SAAS;CACrB,CAAC,CAAC;AAEH,MAAM,aAAa,GAAG,YAAY,CAAC;AACnC,MAAM,cAAc,GAAG,aAAa,CAAC;AACrC,MAAM,WAAW,GAAG,UAAU,CAAC;AAC/B,MAAM,WAAW,GAAG,UAAU,CAAC;AAQ/B,MAAM,OAAO,mBAAmB;;QAC9B,uDAAsB;QACtB,wCAAoB,EAAE,EAAC;QACvB,eAAe;QACf,yDAAkC;QAGlC,uDAAoC;QAkEpC,8BAA8B;QAC9B,2DAA2D;QAC3D,mCAAmC;QACnC,2CAA2C;QAC3C,MAAM;QACN,KAAK;QAEL,wDAA4B,CAC1B,MAAe,EACf,OAAe,EACf,MAAc,EACR,EAAE;YACR,IAAI,MAAM,KAAK,aAAa,EAAE;gBAC5B,IAAI,CAAC,iBAAiB,EAAE,CAAC;aAC1B;iBAAM,IAAI,MAAM,KAAK,cAAc,EAAE;gBACpC,IAAI,CAAC,kBAAkB,EAAE,CAAC;aAC3B;iBAAM,IAAI,MAAM,KAAK,WAAW,EAAE;gBACjC,IAAI,CAAC,eAAe,EAAE,CAAC;aACxB;iBAAM,IAAI,MAAM,KAAK,WAAW,EAAE;gBACjC,IAAI,CAAC,sBAAsB,EAAE,CAAC;aAC/B;QACH,CAAC,EAAC;wBArF2B,KAAK;;;;;;;;;IAqClC,KAAK,CAAC,iBAAiB;QACrB,uBAAA,IAAI,wCAAoB,MAAM,MAAM,CAAC,mBAAmB,CAAC,IAAI,CAAC,EAAE,CAAC,MAAA,CAAC;QAClE,uBAAA,IAAI,iCAAa,mBAAmB,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAA,CAAC;QACzD,uBAAA,IAAI,0CAAsB;YACxB;gBACE,EAAE,EAAE,aAAa;gBACjB,OAAO,EAAE,uBAAA,IAAI,4CAAiB,CAAC,cAAc;gBAC7C,aAAa,EAAE,KAAK;aACrB;YACD;gBACE,EAAE,EAAE,cAAc;gBAClB,OAAO,EAAE,uBAAA,IAAI,4CAAiB,CAAC,eAAe;gBAC9C,aAAa,EAAE,KAAK;aACrB;YACD;gBACE,EAAE,EAAE,WAAW;gBACf,OAAO,EAAE,uBAAA,IAAI,4CAAiB,CAAC,YAAY;gBAC3C,aAAa,EAAE,IAAI;aACpB;YACD,IAAI;YACJ,qBAAqB;YACrB,kDAAkD;YAClD,wBAAwB;YACxB,IAAI;SACL,MAAA,CAAC;IACJ,CAAC;IAyBD,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAC,QAAQ;YAClB,gBAAU,KAAK,EAAE,WAAW,GAAa;YACzC,0BACE,KAAK,EAAC,UAAU,EAChB,KAAK,EAAE,uBAAA,IAAI,8CAAmB,EAC9B,QAAQ,EAAC,sBAAsB,EAC/B,iBAAiB,EAAE,uBAAA,IAAI,qDAA0B;gBAEjD,cACE,KAAK,EAAC,oBAAoB,EAC1B,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,uBAAA,IAAI,wCAAoB,EAAuB,MAAA,CAAC,EAC5D,IAAI,EAAC,QAAQ;oBAEb,WAAK,KAAK,EAAC,qBAAqB;wBAC9B,YAAM,KAAK,EAAC,kBAAkB,IAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAQ;wBAC1D,YAAM,KAAK,EAAC,0BAA0B,IAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAQ,CAC9D;oBACN,WAAK,KAAK,EAAC,oBAAoB,IAAE,uBAAA,IAAI,qCAAU,CAAO;oBACtD,gBACE,GAAG,EAAE,iBAAiB,EACtB,KAAK,EAAC,SAAS,EACf,YAAY,EAAE,uBAAA,IAAI,4CAAiB,GACzB,CACL;gBACT,WAAK,KAAK,EAAC,gCAAgC,EAAC,IAAI,EAAC,QAAQ;oBACvD,SACE,KAAK,EAAC,oCAAoC,EAC1C,OAAO,EAAE,IAAI,CAAC,iBAAiB,IAE9B,uBAAA,IAAI,4CAAiB,CAAC,eAAe,CACpC,CACA,CACa,CAChB,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/* STENCIL IMPORTS */\nimport { Component, Element, Host, Prop, State, h } from \"@stencil/core\";\n\nimport { getIconPath, MercuryBundles } from \"@genexus/mercury\";\n\nimport { Locale } from \"../../common/locale\";\nimport { getInitialsFromName } from \"./helpers\";\nimport { DropdownModel } from \"@genexus/chameleon-controls-library\";\n\nconst CSS_BUNDLES: MercuryBundles = [\n  // TODO: review if \"utils/form--full\" is required.\n  \"resets/box-sizing\",\n  \"components/tooltip\",\n  \"components/toggle\",\n  \"components/icon\",\n  \"components/dropdown\",\n  \"utils/layout\",\n  \"utils/typography\",\n  \"utils/spacing\",\n  \"chameleon/scrollbar\"\n];\n\nconst CHEVRON_DOWN_ICON = getIconPath({\n  category: \"navigation\",\n  name: \"chevron-down\",\n  colorType: \"neutral\"\n});\n\nconst MY_ACCOUNT_ID = \"my-account\";\nconst CHANGE_TEAM_ID = \"change-team\";\nconst SIGN_OUT_ID = \"sign-out\";\nconst LANGUAGE_ID = \"language\";\n\n@Component({\n  tag: \"gx-ide-current-user-info\",\n  styleUrl: \"current-user-info.scss\",\n  shadow: true,\n  assetsDirs: [\"gx-ide-assets/current-user-info\"]\n})\nexport class GxIdeNewEnvironment {\n  #componentLocale: any;\n  #initials: string = \"\";\n  // #mode: Mode;\n  #menuDropdownModel: DropdownModel;\n\n  @Element() el: HTMLGxIdeCurrentUserInfoElement;\n  #userLoginButton: HTMLButtonElement;\n\n  @State() showMenu: boolean = false;\n\n  /**\n   * User data\n   */\n  @Prop() readonly userInfo: UserInfo;\n\n  /**\n   * Callback executed when the user click \"My Account\" link\n   */\n  @Prop() readonly myAccountCallback!: () => Promise<void>;\n\n  /**\n   * Callback executed when the user click \"change team\" link\n   */\n  @Prop() readonly changeTeamCallback!: () => Promise<void>;\n\n  /**\n   * Callback executed when the user click \"Language\" link\n   */\n  @Prop() readonly changeLanguageCallback!: () => Promise<void>;\n\n  /**\n   * Callback executed when the user switch the \"Mode\" status\n   */\n  @Prop() readonly changeModeCallback!: (mode: Mode) => Promise<void>;\n\n  /**\n   * Callback executed when the user click \"Sign Out\" link\n   */\n  @Prop() readonly signOutCallback!: () => Promise<void>;\n\n  /**\n   * Callback executed when the user click \"Privacy Policy & Terms of use\" link\n   */\n  @Prop() readonly showTermsCallback!: () => Promise<void>;\n\n  async componentWillLoad() {\n    this.#componentLocale = await Locale.getComponentStrings(this.el);\n    this.#initials = getInitialsFromName(this.userInfo.name);\n    this.#menuDropdownModel = [\n      {\n        id: MY_ACCOUNT_ID,\n        caption: this.#componentLocale.myAccountLabel,\n        showSeparator: false\n      },\n      {\n        id: CHANGE_TEAM_ID,\n        caption: this.#componentLocale.changeTeamLabel,\n        showSeparator: false\n      },\n      {\n        id: SIGN_OUT_ID,\n        caption: this.#componentLocale.signOutLabel,\n        showSeparator: true\n      }\n      // {\n      //   id: LANGUAGE_ID,\n      //   caption: this.#componentLocale.languageLabel,\n      //   showSeparator: true\n      // }\n    ];\n  }\n\n  // #handleModeSwitch = () => {\n  //   this.#mode = this.#mode === \"dark\" ? \"light\" : \"dark\";\n  //   if (this.changeModeCallback) {\n  //     this.changeModeCallback(this.#mode);\n  //   }\n  // };\n\n  #dropDownitemClickHandler = (\n    _event: UIEvent,\n    _target: string,\n    itemId: string\n  ): void => {\n    if (itemId === MY_ACCOUNT_ID) {\n      this.myAccountCallback();\n    } else if (itemId === CHANGE_TEAM_ID) {\n      this.changeTeamCallback();\n    } else if (itemId === SIGN_OUT_ID) {\n      this.signOutCallback();\n    } else if (itemId === LANGUAGE_ID) {\n      this.changeLanguageCallback();\n    }\n  };\n\n  render() {\n    return (\n      <Host class=\"widget\">\n        <ch-theme model={CSS_BUNDLES}></ch-theme>\n        <ch-dropdown-render\n          class=\"dropdown\"\n          model={this.#menuDropdownModel}\n          position=\"InsideEnd_OutsideEnd\"\n          itemClickCallback={this.#dropDownitemClickHandler}\n        >\n          <button\n            class=\"user-login__button\"\n            ref={el => (this.#userLoginButton = el as HTMLButtonElement)}\n            slot=\"action\"\n          >\n            <div class=\"user-login__details\">\n              <span class=\"user-login__name\">{this.userInfo.name}</span>\n              <span class=\"user-login__organization\">{this.userInfo.team}</span>\n            </div>\n            <div class=\"user-login__avatar\">{this.#initials}</div>\n            <ch-image\n              src={CHEVRON_DOWN_ICON}\n              class=\"icon-md\"\n              containerRef={this.#userLoginButton}\n            ></ch-image>\n          </button>\n          <div class=\"user-login__footer footer-slot\" slot=\"footer\">\n            <p\n              class=\"text-body-regular-s privacy-policy\"\n              onClick={this.showTermsCallback}\n            >\n              {this.#componentLocale.privacyAndTerms}\n            </p>\n          </div>\n        </ch-dropdown-render>\n      </Host>\n    );\n  }\n}\n\nexport type UserInfo = {\n  name: string;\n  team: string;\n};\n\nexport type Mode = \"dark\" | \"light\";\n"]}
+{"version":3,"file":"current-user-info.js","sourceRoot":"","sources":["../../../src/components/current-user-info/current-user-info.tsx"],"names":[],"mappings":"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","sourcesContent":["/* STENCIL IMPORTS */\nimport { Component, Element, Host, Prop, State, h } from \"@stencil/core\";\n\nimport { getIconPath, MercuryBundles } from \"@genexus/mercury\";\n\nimport { Locale } from \"../../common/locale\";\nimport { getInitialsFromName, limitFullName } from \"./helpers\";\nimport { DropdownModel } from \"@genexus/chameleon-controls-library\";\n\nconst CSS_BUNDLES: MercuryBundles = [\n  // TODO: review if \"utils/form--full\" is required.\n  \"resets/box-sizing\",\n  \"components/tooltip\",\n  \"components/toggle\",\n  \"components/icon\",\n  \"components/dropdown\",\n  \"utils/layout\",\n  \"utils/typography\",\n  \"utils/spacing\",\n  \"chameleon/scrollbar\"\n];\n\nconst CHEVRON_DOWN_ICON = getIconPath({\n  category: \"navigation\",\n  name: \"chevron-down\",\n  colorType: \"neutral\"\n});\n\nconst MY_ACCOUNT_ID = \"my-account\";\nconst CHANGE_TEAM_ID = \"change-team\";\nconst SIGN_OUT_ID = \"sign-out\";\nconst LANGUAGE_ID = \"language\";\n\n@Component({\n  tag: \"gx-ide-current-user-info\",\n  styleUrl: \"current-user-info.scss\",\n  shadow: true,\n  assetsDirs: [\"gx-ide-assets/current-user-info\"]\n})\nexport class GxIdeNewEnvironment {\n  #componentLocale: any;\n  #initials: string = \"\";\n  // #mode: Mode;\n  #menuDropdownModel: DropdownModel;\n\n  @Element() el: HTMLGxIdeCurrentUserInfoElement;\n  #userLoginButton: HTMLButtonElement;\n\n  @State() showMenu: boolean = false;\n\n  /**\n   * User data\n   */\n  @Prop() readonly userInfo: UserInfo;\n\n  /**\n   * Callback executed when the user click \"My Account\" link\n   */\n  @Prop() readonly myAccountCallback!: () => Promise<void>;\n\n  /**\n   * Callback executed when the user click \"change team\" link\n   */\n  @Prop() readonly changeTeamCallback!: () => Promise<void>;\n\n  /**\n   * Callback executed when the user click \"Language\" link\n   */\n  @Prop() readonly changeLanguageCallback!: () => Promise<void>;\n\n  /**\n   * Callback executed when the user switch the \"Mode\" status\n   */\n  @Prop() readonly changeModeCallback!: (mode: Mode) => Promise<void>;\n\n  /**\n   * Callback executed when the user click \"Sign Out\" link\n   */\n  @Prop() readonly signOutCallback!: () => Promise<void>;\n\n  /**\n   * Callback executed when the user click \"Privacy Policy & Terms of use\" link\n   */\n  @Prop() readonly showTermsCallback!: () => Promise<void>;\n\n  async componentWillLoad() {\n    this.#componentLocale = await Locale.getComponentStrings(this.el);\n    this.#initials = getInitialsFromName(this.userInfo.name);\n    this.#menuDropdownModel = [\n      {\n        id: MY_ACCOUNT_ID,\n        caption: this.#componentLocale.myAccountLabel,\n        showSeparator: false\n      },\n      {\n        id: CHANGE_TEAM_ID,\n        caption: this.#componentLocale.changeTeamLabel,\n        showSeparator: false\n      },\n      {\n        id: SIGN_OUT_ID,\n        caption: this.#componentLocale.signOutLabel,\n        showSeparator: true\n      }\n      // {\n      //   id: LANGUAGE_ID,\n      //   caption: this.#componentLocale.languageLabel,\n      //   showSeparator: true\n      // }\n    ];\n  }\n\n  // #handleModeSwitch = () => {\n  //   this.#mode = this.#mode === \"dark\" ? \"light\" : \"dark\";\n  //   if (this.changeModeCallback) {\n  //     this.changeModeCallback(this.#mode);\n  //   }\n  // };\n\n  #dropDownitemClickHandler = (\n    _event: UIEvent,\n    _target: string,\n    itemId: string\n  ): void => {\n    if (itemId === MY_ACCOUNT_ID) {\n      this.myAccountCallback();\n    } else if (itemId === CHANGE_TEAM_ID) {\n      this.changeTeamCallback();\n    } else if (itemId === SIGN_OUT_ID) {\n      this.signOutCallback();\n    } else if (itemId === LANGUAGE_ID) {\n      this.changeLanguageCallback();\n    }\n  };\n\n  render() {\n    const userName = limitFullName(this.userInfo?.name);\n    return (\n      <Host class=\"widget\">\n        <ch-theme model={CSS_BUNDLES}></ch-theme>\n        <ch-dropdown-render\n          class=\"dropdown\"\n          model={this.#menuDropdownModel}\n          position=\"InsideEnd_OutsideEnd\"\n          itemClickCallback={this.#dropDownitemClickHandler}\n        >\n          <button\n            class=\"user-login__button\"\n            ref={el => (this.#userLoginButton = el as HTMLButtonElement)}\n            slot=\"action\"\n          >\n            <div class=\"user-login__details\">\n              {userName ? (\n                <span class=\"user-login__name\">{userName}</span>\n              ) : null}\n              {this.userInfo?.team ? (\n                <span class=\"user-login__organization\">\n                  {this.userInfo.team}\n                </span>\n              ) : null}\n            </div>\n\n            <div class=\"user-login__avatar\">{this.#initials}</div>\n            <ch-image\n              src={CHEVRON_DOWN_ICON}\n              class=\"icon-md\"\n              containerRef={this.#userLoginButton}\n            ></ch-image>\n          </button>\n          <div class=\"user-login__footer footer-slot\" slot=\"footer\">\n            <p\n              class=\"text-body-regular-s privacy-policy\"\n              onClick={this.showTermsCallback}\n            >\n              {this.#componentLocale.privacyAndTerms}\n            </p>\n          </div>\n        </ch-dropdown-render>\n      </Host>\n    );\n  }\n}\n\nexport type UserInfo = {\n  name: string;\n  team: string;\n};\n\nexport type Mode = \"dark\" | \"light\";\n"]}

package/dist/collection/components/current-user-info/helpers.js

@@ -1,5 +1,19 @@
+/**
+ * Returns initials from the first two words of a name. Returns "X" for invalid input.
+ *
+ * @param name - The full name string.
+ * @returns Initials of the first two words, or "X" if invalid.
+ *
+ * Example:
+ * getInitialsFromName("John Doe") -> "JD"
+ * getInitialsFromName("Jane") -> "J"
+ * getInitialsFromName("") -> "X"
+ */
 export const getInitialsFromName = (name) => {
-    const nameData = name.split(" ");
+    if (typeof name !== "string" || name.trim() === "") {
+        return "X";
+    }
+    const nameData = name.split(" ").filter(Boolean); // Remove any empty strings from splitting
     if (nameData.length === 1) {
         return nameData[0][0].toUpperCase();
     }
@@ -7,4 +21,27 @@ export const getInitialsFromName = (name) => {
         return `${nameData[0][0].toUpperCase()}${nameData[1][0].toUpperCase()}`;
     }
 };
+/**
+ * Limits the full name to the first two words. Returns null for invalid input.
+ *
+ * @param fullName - The full name string to be limited.
+ * @returns The first two words of the full name, or null if invalid.
+ *
+ * Example:
+ * limitFullName("John Doe Smith") -> "John Doe"
+ * limitFullName("Jane") -> "Jane"
+ * limitFullName("") -> null
+ */
+export const limitFullName = (fullName) => {
+    if (typeof fullName !== "string" || fullName.trim() === "") {
+        return null;
+    }
+    const fullNameData = fullName.split(" ").filter(Boolean); // Remove any empty strings from splitting
+    if (fullNameData.length === 1) {
+        return fullNameData[0];
+    }
+    else {
+        return `${fullNameData[0]} ${fullNameData[1]}`;
+    }
+};
 //# sourceMappingURL=helpers.js.map

package/dist/collection/components/current-user-info/helpers.js.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.js","sourceRoot":"","sources":["../../../src/components/current-user-info/helpers.tsx"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,IAAY,EAAU,EAAE;IAC1D,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IACjC,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,EAAE;QACzB,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;KACrC;SAAM;QACL,OAAO,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,EAAE,CAAC;KACzE;AACH,CAAC,CAAC","sourcesContent":["export const getInitialsFromName = (name: string): string => {\n  const nameData = name.split(\" \");\n  if (nameData.length === 1) {\n    return nameData[0][0].toUpperCase();\n  } else {\n    return `${nameData[0][0].toUpperCase()}${nameData[1][0].toUpperCase()}`;\n  }\n};\n"]}
+{"version":3,"file":"helpers.js","sourceRoot":"","sources":["../../../src/components/current-user-info/helpers.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,IAAY,EAAiB,EAAE;IACjE,IAAI,OAAO,IAAI,KAAK,QAAQ,IAAI,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;QAClD,OAAO,GAAG,CAAC;KACZ;IAED,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,0CAA0C;IAC5F,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,EAAE;QACzB,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;KACrC;SAAM;QACL,OAAO,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,EAAE,CAAC;KACzE;AACH,CAAC,CAAC;AAEF;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,QAAgB,EAAiB,EAAE;IAC/D,IAAI,OAAO,QAAQ,KAAK,QAAQ,IAAI,QAAQ,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;QAC1D,OAAO,IAAI,CAAC;KACb;IAED,MAAM,YAAY,GAAG,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,0CAA0C;IACpG,IAAI,YAAY,CAAC,MAAM,KAAK,CAAC,EAAE;QAC7B,OAAO,YAAY,CAAC,CAAC,CAAC,CAAC;KACxB;SAAM;QACL,OAAO,GAAG,YAAY,CAAC,CAAC,CAAC,IAAI,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;KAChD;AACH,CAAC,CAAC","sourcesContent":["/**\n * Returns initials from the first two words of a name. Returns \"X\" for invalid input.\n *\n * @param name - The full name string.\n * @returns Initials of the first two words, or \"X\" if invalid.\n *\n * Example:\n * getInitialsFromName(\"John Doe\") -> \"JD\"\n * getInitialsFromName(\"Jane\") -> \"J\"\n * getInitialsFromName(\"\") -> \"X\"\n */\nexport const getInitialsFromName = (name: string): string | null => {\n  if (typeof name !== \"string\" || name.trim() === \"\") {\n    return \"X\";\n  }\n\n  const nameData = name.split(\" \").filter(Boolean); // Remove any empty strings from splitting\n  if (nameData.length === 1) {\n    return nameData[0][0].toUpperCase();\n  } else {\n    return `${nameData[0][0].toUpperCase()}${nameData[1][0].toUpperCase()}`;\n  }\n};\n\n/**\n * Limits the full name to the first two words. Returns null for invalid input.\n *\n * @param fullName - The full name string to be limited.\n * @returns The first two words of the full name, or null if invalid.\n *\n * Example:\n * limitFullName(\"John Doe Smith\") -> \"John Doe\"\n * limitFullName(\"Jane\") -> \"Jane\"\n * limitFullName(\"\") -> null\n */\nexport const limitFullName = (fullName: string): string | null => {\n  if (typeof fullName !== \"string\" || fullName.trim() === \"\") {\n    return null;\n  }\n\n  const fullNameData = fullName.split(\" \").filter(Boolean); // Remove any empty strings from splitting\n  if (fullNameData.length === 1) {\n    return fullNameData[0];\n  } else {\n    return `${fullNameData[0]} ${fullNameData[1]}`;\n  }\n};\n"]}

package/dist/collection/components/data-type-selector/data-type-selector.css

@@ -0,0 +1,24 @@
+: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;
+}

package/dist/collection/components/data-type-selector/data-type-selector.js

@@ -0,0 +1,275 @@
+var __classPrivateFieldGet = (this && this.__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 = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m")
+        throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f)
+        throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+        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;
+// Stencil
+import { Host, h } from "@stencil/core";
+// Other Libraries
+import { getIconPath } from "@genexus/mercury";
+// Gx Ide Ui
+import { Locale } from "../../common/locale";
+import { mapCategoryToListItemGroup, mapDataTypesToList } from "./helpers";
+const CSS_BUNDLES = [
+    "resets/box-sizing",
+    "components/tab",
+    "components/tooltip",
+    "components/list-box",
+    "components/tree-view",
+    "utils/form--full",
+    "utils/layout",
+    "utils/typography",
+    "utils/spacing",
+    "chameleon/scrollbar"
+];
+const ALL_CATEGORY_ID = "all";
+const RECENTLY_USED_CATEGORY_ID = "recenttly-used";
+const CLOCK_ICON = getIconPath({
+    category: "system",
+    name: "time",
+    colorType: "primary"
+});
+export class GxIdeKbManagerImport {
+    constructor() {
+        _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_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;
+                }
+            }
+            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);
+            }
+        });
+        _GxIdeKbManagerImport_showAllObjects.set(this, () => {
+            if (!__classPrivateFieldGet(this, _GxIdeKbManagerImport_showAll, "f")) {
+                const allCategoriesActionListModel = [];
+                let counter = 1;
+                const mapLength = __classPrivateFieldGet(this, _GxIdeKbManagerImport_categoriesActionListItemGroupMap, "f").size;
+                for (const key of __classPrivateFieldGet(this, _GxIdeKbManagerImport_categoriesActionListItemGroupMap, "f").keys()) {
+                    allCategoriesActionListModel.push(__classPrivateFieldGet(this, _GxIdeKbManagerImport_categoriesActionListItemGroupMap, "f").get(key));
+                    if (counter !== mapLength) {
+                        allCategoriesActionListModel.push({ type: "separator" });
+                    }
+                    counter++;
+                }
+                this.categoriesListBoxModel = allCategoriesActionListModel;
+                __classPrivateFieldSet(this, _GxIdeKbManagerImport_showAll, true, "f");
+                this.selectedCategory = ALL_CATEGORY_ID;
+            }
+        });
+        _GxIdeKbManagerImport_showRecentlyObjects.set(this, () => {
+            __classPrivateFieldSet(this, _GxIdeKbManagerImport_showAll, false, "f");
+            this.categoriesListBoxModel = this.recentlyUsedActionListModel;
+            this.selectedCategory = RECENTLY_USED_CATEGORY_ID;
+        });
+        this.selectedCategoryHandler = (e) => {
+            this.selectedCategory = e.currentTarget.dataset.name;
+            const newSelectedCategory = [
+                __classPrivateFieldGet(this, _GxIdeKbManagerImport_categoriesActionListItemGroupMap, "f").get(this.selectedCategory)
+            ];
+            this.categoriesListBoxModel = newSelectedCategory;
+            __classPrivateFieldSet(this, _GxIdeKbManagerImport_showAll, false, "f");
+        };
+        _GxIdeKbManagerImport_renderFooter.set(this, () => {
+            const recentlyUsedBtnClass = this.selectedCategory === RECENTLY_USED_CATEGORY_ID
+                ? "button-secondary"
+                : "button-tertiary";
+            const allBtnClass = this.selectedCategory === ALL_CATEGORY_ID
+                ? "button-secondary"
+                : "button-tertiary";
+            let selectedCategoryDescription = this.selectedCategory;
+            if (this.selectedCategory === RECENTLY_USED_CATEGORY_ID) {
+                selectedCategoryDescription =
+                    __classPrivateFieldGet(this, _GxIdeKbManagerImport__componentLocale, "f").fixedTypes.recentlyUsed;
+            }
+            else if (this.selectedCategory === ALL_CATEGORY_ID) {
+                selectedCategoryDescription = __classPrivateFieldGet(this, _GxIdeKbManagerImport__componentLocale, "f").fixedTypes.all;
+            }
+            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 => {
+                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 })));
+            })), h("p", { class: "text-body-regular-s selected-category" }, selectedCategoryDescription)));
+        });
+        this.categoriesListBoxModel = [];
+        this.selectedCategory = undefined;
+        this.statusInfo = [];
+        this.recentlyUsedActionListModel = [];
+        this.loading = true;
+        this.categories = undefined;
+        this.dataTypeSelectedCallback = undefined;
+        this.recentlyUsed = [];
+    }
+    categoriesChanged(newCategories) {
+        if (!(newCategories === null || newCategories === void 0 ? void 0 : newCategories.length)) {
+            return;
+        }
+        __classPrivateFieldGet(this, _GxIdeKbManagerImport_categoriesActionListItemGroupMap, "f").clear();
+        newCategories.forEach(category => {
+            const categoryListBoxModel = mapCategoryToListItemGroup(category);
+            __classPrivateFieldGet(this, _GxIdeKbManagerImport_categoriesActionListItemGroupMap, "f").set(category.name, categoryListBoxModel);
+        });
+        this.loading = false;
+        __classPrivateFieldGet(this, _GxIdeKbManagerImport_showAllObjects, "f").call(this);
+    }
+    recentlyUsedChanged(newRecentlyUsed) {
+        this.recentlyUsedActionListModel = null;
+        this.recentlyUsedActionListModel = mapDataTypesToList(newRecentlyUsed);
+    }
+    async componentWillLoad() {
+        __classPrivateFieldSet(this, _GxIdeKbManagerImport__componentLocale, await Locale.getComponentStrings(this.el), "f");
+        // initialize models
+        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)))));
+    }
+    static get is() { return "gx-ide-data-type-selector"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["data-type-selector.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["data-type-selector.css"]
+        };
+    }
+    static get assetsDirs() { return ["gx-ide-assets/data-type-selector"]; }
+    static get properties() {
+        return {
+            "categories": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "DataTypeCategoryData[]",
+                    "resolved": "DataTypeCategoryData[]",
+                    "references": {
+                        "DataTypeCategoryData": {
+                            "location": "local",
+                            "path": "/home/runner/work/genexus-ide-ui/genexus-ide-ui/src/components/data-type-selector/data-type-selector.tsx",
+                            "id": "src/components/data-type-selector/data-type-selector.tsx::DataTypeCategoryData"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "All possible types and its category"
+                },
+                "defaultValue": "undefined"
+            },
+            "dataTypeSelectedCallback": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "DataTypeSelectedCallback",
+                    "resolved": "(data: { name: string; icon: string; }) => Promise<void>",
+                    "references": {
+                        "DataTypeSelectedCallback": {
+                            "location": "local",
+                            "path": "/home/runner/work/genexus-ide-ui/genexus-ide-ui/src/components/data-type-selector/data-type-selector.tsx",
+                            "id": "src/components/data-type-selector/data-type-selector.tsx::DataTypeSelectedCallback"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Callback invoked when user select an item type"
+                }
+            },
+            "recentlyUsed": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "DataTypeData[]",
+                    "resolved": "DataTypeData[]",
+                    "references": {
+                        "DataTypeData": {
+                            "location": "local",
+                            "path": "/home/runner/work/genexus-ide-ui/genexus-ide-ui/src/components/data-type-selector/data-type-selector.tsx",
+                            "id": "src/components/data-type-selector/data-type-selector.tsx::DataTypeData"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "All recently used types list"
+                },
+                "defaultValue": "[]"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "categoriesListBoxModel": {},
+            "selectedCategory": {},
+            "statusInfo": {},
+            "recentlyUsedActionListModel": {},
+            "loading": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "categories",
+                "methodName": "categoriesChanged"
+            }, {
+                "propName": "recentlyUsed",
+                "methodName": "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();
+//# sourceMappingURL=data-type-selector.js.map

package/dist/collection/components/data-type-selector/data-type-selector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-type-selector.js","sourceRoot":"","sources":["../../../src/components/data-type-selector/data-type-selector.tsx"],"names":[],"mappings":"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","sourcesContent":["// Stencil\nimport { Component, Host, h, Prop, Element, State, Watch } from \"@stencil/core\";\n// Other Libraries\nimport { MercuryBundles, getIconPath } from \"@genexus/mercury\";\nimport {\n  ActionListItemActionable,\n  ActionListItemModel,\n  ActionListItemModelExtended,\n  ActionListItemType,\n  ActionListModel\n} from \"@genexus/chameleon-controls-library\";\nimport {\n  ActionListItemAdditionalBase,\n  ActionListItemGroup\n} from \"@genexus/chameleon-controls-library/dist/types/components/action-list/types\";\n// Gx Ide Ui\nimport { Locale } from \"../../common/locale\";\nimport { mapCategoryToListItemGroup, mapDataTypesToList } from \"./helpers\";\n\nconst CSS_BUNDLES: MercuryBundles = [\n  \"resets/box-sizing\",\n  \"components/tab\",\n  \"components/tooltip\",\n  \"components/list-box\",\n  \"components/tree-view\",\n  \"utils/form--full\",\n  \"utils/layout\",\n  \"utils/typography\",\n  \"utils/spacing\",\n  \"chameleon/scrollbar\"\n];\n\nconst ALL_CATEGORY_ID = \"all\";\nconst RECENTLY_USED_CATEGORY_ID = \"recenttly-used\";\n\nconst CLOCK_ICON = getIconPath({\n  category: \"system\",\n  name: \"time\",\n  colorType: \"primary\"\n});\n\n@Component({\n  tag: \"gx-ide-data-type-selector\",\n  styleUrl: \"data-type-selector.scss\",\n  shadow: true,\n  assetsDirs: [\"gx-ide-assets/data-type-selector\"]\n})\nexport class GxIdeKbManagerImport {\n  #_componentLocale: any;\n  #showAll: boolean = false;\n  #categoriesActionListItemGroupMap: Map<string, ActionListItemGroup> = new Map<\n    string,\n    ActionListItemGroup\n  >();\n\n  @Element() el: HTMLGxIdeDataTypeSelectorElement;\n\n  @State() categoriesListBoxModel: ActionListItemModel[] = [];\n  @State() selectedCategory: string;\n  @State() statusInfo: StatusInfo[] = [];\n  @State() recentlyUsedActionListModel: ActionListModel = [];\n  @State() loading: boolean = true;\n\n  /**\n   * All possible types and its category\n   */\n  @Prop() readonly categories: DataTypeCategoryData[] = undefined;\n  @Watch(\"categories\")\n  categoriesChanged(newCategories: DataTypeCategoryData[]) {\n    if (!newCategories?.length) {\n      return;\n    }\n    this.#categoriesActionListItemGroupMap.clear();\n    newCategories.forEach(category => {\n      const categoryListBoxModel = mapCategoryToListItemGroup(category);\n      this.#categoriesActionListItemGroupMap.set(\n        category.name,\n        categoryListBoxModel\n      );\n    });\n    this.loading = false;\n    this.#showAllObjects();\n  }\n\n  /**\n   * Callback invoked when user select an item type\n   */\n  @Prop() readonly dataTypeSelectedCallback: DataTypeSelectedCallback;\n\n  /**\n   * All recently used types list\n   */\n  @Prop() readonly recentlyUsed: DataTypeData[] = [];\n  @Watch(\"recentlyUsed\")\n  recentlyUsedChanged(newRecentlyUsed: DataTypeData[]) {\n    this.recentlyUsedActionListModel = null;\n    this.recentlyUsedActionListModel = mapDataTypesToList(newRecentlyUsed);\n  }\n\n  async componentWillLoad() {\n    this.#_componentLocale = await Locale.getComponentStrings(this.el);\n    // initialize models\n    this.recentlyUsed.length && this.recentlyUsedChanged(this.recentlyUsed);\n  }\n\n  #handleSelectionChange = (\n    event: CustomEvent<ActionListItemModelExtended[]>\n  ) => {\n    const eventType = event.detail[0]?.item.type;\n    if (eventType === \"actionable\") {\n      const name = event.detail[0].item.caption;\n\n      const itemAdditionalBase = event.detail[0].item.additionalInformation[\n        \"stretch-start\"\n      ].center[0] as ActionListItemAdditionalBase;\n      const icon = itemAdditionalBase.imgSrc;\n\n      this.dataTypeSelectedCallback({\n        name: name,\n        icon: icon\n      });\n\n      this.#updateListBoxModelState(event.detail[0].item.caption, \"actionable\");\n    } else if (eventType === \"group\") {\n      this.#updateListBoxModelState(event.detail[0].item.caption, \"group\");\n    }\n  };\n\n  #updateListBoxModelState = (name: string, type: ActionListItemType) => {\n    if (this.selectedCategory === RECENTLY_USED_CATEGORY_ID) {\n      this.recentlyUsedActionListModel.forEach(item => {\n        // clear selected\n        (item as ActionListItemActionable).selected = false;\n      });\n      const selectedItemIndex = this.recentlyUsed.findIndex(\n        item => item.name === name\n      );\n      if (selectedItemIndex !== -1) {\n        (\n          this.recentlyUsedActionListModel[\n            selectedItemIndex\n          ] as ActionListItemActionable\n        ).selected = true;\n      }\n    } else if (\n      type === \"group\" &&\n      this.#categoriesActionListItemGroupMap.has(name)\n    ) {\n      const group = this.#categoriesActionListItemGroupMap.get(\n        name\n      ) as ActionListItemGroup;\n      const groupUpdated = { ...group, expanded: group.expanded };\n      this.#categoriesActionListItemGroupMap.set(name, groupUpdated);\n    }\n  };\n\n  #showAllObjects = () => {\n    if (!this.#showAll) {\n      const allCategoriesActionListModel: ActionListItemModel[] = [];\n      let counter = 1;\n      const mapLength = this.#categoriesActionListItemGroupMap.size;\n      for (const key of this.#categoriesActionListItemGroupMap.keys()) {\n        allCategoriesActionListModel.push(\n          this.#categoriesActionListItemGroupMap.get(key)\n        );\n        if (counter !== mapLength) {\n          allCategoriesActionListModel.push({ type: \"separator\" });\n        }\n        counter++;\n      }\n      this.categoriesListBoxModel = allCategoriesActionListModel;\n      this.#showAll = true;\n      this.selectedCategory = ALL_CATEGORY_ID;\n    }\n  };\n\n  #showRecentlyObjects = () => {\n    this.#showAll = false;\n    this.categoriesListBoxModel = this.recentlyUsedActionListModel;\n    this.selectedCategory = RECENTLY_USED_CATEGORY_ID;\n  };\n\n  private selectedCategoryHandler = (e: MouseEvent) => {\n    this.selectedCategory = (e.currentTarget as HTMLButtonElement).dataset.name;\n    const newSelectedCategory = [\n      this.#categoriesActionListItemGroupMap.get(this.selectedCategory)\n    ];\n    this.categoriesListBoxModel = newSelectedCategory;\n    this.#showAll = false;\n  };\n\n  #renderFooter = () => {\n    const recentlyUsedBtnClass =\n      this.selectedCategory === RECENTLY_USED_CATEGORY_ID\n        ? \"button-secondary\"\n        : \"button-tertiary\";\n    const allBtnClass =\n      this.selectedCategory === ALL_CATEGORY_ID\n        ? \"button-secondary\"\n        : \"button-tertiary\";\n    let selectedCategoryDescription = this.selectedCategory;\n    if (this.selectedCategory === RECENTLY_USED_CATEGORY_ID) {\n      selectedCategoryDescription =\n        this.#_componentLocale.fixedTypes.recentlyUsed;\n    } else if (this.selectedCategory === ALL_CATEGORY_ID) {\n      selectedCategoryDescription = this.#_componentLocale.fixedTypes.all;\n    } else {\n      selectedCategoryDescription = this.selectedCategory;\n    }\n\n    return (\n      <footer\n        class=\"footer control-footer control-footer-start spacing-body-inline spacing-body-block scrollable\n      \"\n      >\n        <div class=\"buttons-spacer\">\n          {this.recentlyUsed && this.recentlyUsed.length > 0 && (\n            <button\n              class={`button-icon-only ${recentlyUsedBtnClass}`}\n              aria-label={`${this.#_componentLocale.select} ${\n                this.#_componentLocale.fixedTypes.recentlyUsed\n              }`}\n              title={`${this.#_componentLocale.select} ${\n                this.#_componentLocale.fixedTypes.recentlyUsed\n              }`}\n              onClick={this.#showRecentlyObjects}\n            >\n              <ch-image class=\"icon-md\" src={CLOCK_ICON}></ch-image>\n            </button>\n          )}\n          <button\n            class={`button-icon-only ${allBtnClass}`}\n            onClick={this.#showAllObjects}\n            aria-label={`${this.#_componentLocale.select} ${\n              this.#_componentLocale.fixedTypes.all\n            }`}\n            title={`${this.#_componentLocale.select} ${\n              this.#_componentLocale.fixedTypes.all\n            }`}\n          >\n            [*]\n          </button>\n          {this.categories.map(category => {\n            const buttonClass =\n              category.name === this.selectedCategory\n                ? \"button-secondary\"\n                : \"button-tertiary\";\n\n            return (\n              <button\n                class={`button-icon-only ${buttonClass}`}\n                aria-label={category.name}\n                title={category.name}\n                onClick={this.selectedCategoryHandler}\n                data-name={category.name}\n              >\n                <ch-image class=\"icon-md\" src={category.icon}></ch-image>\n              </button>\n            );\n          })}\n        </div>\n        <p class=\"text-body-regular-s selected-category\">\n          {selectedCategoryDescription}\n        </p>\n      </footer>\n    );\n  };\n\n  render(): void {\n    return (\n      <Host class=\"widget\">\n        <ch-theme model={CSS_BUNDLES}></ch-theme>\n        {this.loading ? (\n          <gx-ide-loader\n            loaderTitle={this.#_componentLocale.loader.title}\n            description={this.#_componentLocale.loader.description}\n            show\n          ></gx-ide-loader>\n        ) : (\n          <section class=\"main\">\n            <ch-action-list-render\n              class=\"list-box\"\n              model={this.categoriesListBoxModel}\n              selection=\"single\"\n              onSelectedItemsChange={this.#handleSelectionChange}\n            ></ch-action-list-render>\n            {this.#renderFooter()}\n          </section>\n        )}\n      </Host>\n    );\n  }\n}\n\ntype StatusInfo = {\n  [key: string]: {\n    display: boolean;\n  };\n};\n\nexport type DataTypeCategoryData = {\n  name: string;\n  icon: string;\n  types: DataTypeData[];\n};\nexport type DataTypeData = {\n  name: string;\n  icon: string;\n};\n\nexport type DataTypeSelectedCallback = (data: {\n  name: string;\n  icon: string;\n}) => Promise<void>;\n"]}

package/dist/collection/components/data-type-selector/gx-ide-assets/data-type-selector/langs/data-type-selector.lang.en.json

@@ -0,0 +1,13 @@
+{
+  "componentName": "Data Type Selector",
+  "loader": {
+    "title": "Loading Data Types",
+    "description": "Hango on please..."
+  },
+  "fixedTypes": {
+    "all": "All",
+    "recentlyUsed": "Recently Used"
+  },
+  "select": "Select",
+  "selectedCategory": "Selected Cateogry: "
+}

package/dist/collection/components/data-type-selector/gx-ide-assets/data-type-selector/langs/data-type-selector.lang.ja.json

@@ -0,0 +1,13 @@
+{
+  "componentName": "Data Type Selector",
+  "loader": {
+    "title": "",
+    "description": ""
+  },
+  "fixedTypes": {
+    "all": "",
+    "recentlyUsed": ""
+  },
+  "select": "",
+  "selectedCategory": ""
+}

package/dist/collection/components/data-type-selector/gx-ide-assets/data-type-selector/langs/data-type-selector.lang.zh.json

@@ -0,0 +1,13 @@
+{
+  "componentName": "Data Type Selector",
+  "loader": {
+    "title": "",
+    "description": ""
+  },
+  "fixedTypes": {
+    "all": "",
+    "recentlyUsed": ""
+  },
+  "select": "",
+  "selectedCategory": ""
+}

package/dist/collection/components/data-type-selector/helpers.js

@@ -0,0 +1,38 @@
+export const mapCategoryToListItemGroup = (category) => {
+    const categoryGroup = {
+        caption: category.name,
+        id: category.name,
+        type: "group",
+        expanded: true,
+        expandable: true,
+        items: category.types.map(type => {
+            return {
+                caption: type.name,
+                id: type.name,
+                additionalInformation: {
+                    "stretch-start": {
+                        center: [{ imgSrc: type.icon }]
+                    }
+                },
+                type: "actionable"
+            };
+        })
+    };
+    return categoryGroup;
+};
+export const mapDataTypesToList = (dataTypes) => {
+    return dataTypes.map((dataType, index) => {
+        return {
+            caption: dataType.name,
+            id: dataType.name,
+            additionalInformation: {
+                "stretch-start": {
+                    center: [{ imgSrc: dataType.icon || undefined }]
+                }
+            },
+            type: "actionable",
+            order: index
+        };
+    });
+};
+//# sourceMappingURL=helpers.js.map

package/dist/collection/components/data-type-selector/helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.js","sourceRoot":"","sources":["../../../src/components/data-type-selector/helpers.ts"],"names":[],"mappings":"AAMA,MAAM,CAAC,MAAM,0BAA0B,GAAG,CACxC,QAA8B,EACT,EAAE;IACvB,MAAM,aAAa,GAAwB;QACzC,OAAO,EAAE,QAAQ,CAAC,IAAI;QACtB,EAAE,EAAE,QAAQ,CAAC,IAAI;QACjB,IAAI,EAAE,OAAO;QACb,QAAQ,EAAE,IAAI;QACd,UAAU,EAAE,IAAI;QAChB,KAAK,EAAE,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;YAC/B,OAAO;gBACL,OAAO,EAAE,IAAI,CAAC,IAAI;gBAClB,EAAE,EAAE,IAAI,CAAC,IAAI;gBACb,qBAAqB,EAAE;oBACrB,eAAe,EAAE;wBACf,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC;qBAChC;iBACF;gBACD,IAAI,EAAE,YAAY;aACnB,CAAC;QACJ,CAAC,CAAC;KACH,CAAC;IACF,OAAO,aAAa,CAAC;AACvB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAChC,SAAyB,EACR,EAAE;IACnB,OAAO,SAAS,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,KAAK,EAAE,EAAE;QACvC,OAAO;YACL,OAAO,EAAE,QAAQ,CAAC,IAAI;YACtB,EAAE,EAAE,QAAQ,CAAC,IAAI;YACjB,qBAAqB,EAAE;gBACrB,eAAe,EAAE;oBACf,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,QAAQ,CAAC,IAAI,IAAI,SAAS,EAAE,CAAC;iBACjD;aACF;YACD,IAAI,EAAE,YAAY;YAClB,KAAK,EAAE,KAAK;SACb,CAAC;IACJ,CAAC,CAAC,CAAC;AACL,CAAC,CAAC","sourcesContent":["import { DataTypeCategoryData, DataTypeData } from \"./data-type-selector\";\nimport {\n  ActionListItemGroup,\n  ActionListModel\n} from \"@genexus/chameleon-controls-library/dist/types/components/action-list/types\";\n\nexport const mapCategoryToListItemGroup = (\n  category: DataTypeCategoryData\n): ActionListItemGroup => {\n  const categoryGroup: ActionListItemGroup = {\n    caption: category.name,\n    id: category.name,\n    type: \"group\",\n    expanded: true,\n    expandable: true,\n    items: category.types.map(type => {\n      return {\n        caption: type.name,\n        id: type.name,\n        additionalInformation: {\n          \"stretch-start\": {\n            center: [{ imgSrc: type.icon }]\n          }\n        },\n        type: \"actionable\"\n      };\n    })\n  };\n  return categoryGroup;\n};\n\nexport const mapDataTypesToList = (\n  dataTypes: DataTypeData[]\n): ActionListModel => {\n  return dataTypes.map((dataType, index) => {\n    return {\n      caption: dataType.name,\n      id: dataType.name,\n      additionalInformation: {\n        \"stretch-start\": {\n          center: [{ imgSrc: dataType.icon || undefined }]\n        }\n      },\n      type: \"actionable\",\n      order: index\n    };\n  });\n};\n"]}