@genexus/genexus-ide-ui 1.0.39 → 1.0.41

package/dist/genexus-ide-ui/p-a3a43593.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["mapCategoryToListItemGroup","category","categoryGroup","caption","name","id","type","expanded","expandable","items","types","map","additionalInformation","center","imgSrc","icon","mapDataTypesToList","dataTypes","dataType","index","undefined","order","dataTypeSelectorCss","CSS_BUNDLES","ALL_CATEGORY_ID","RECENTLY_USED_CATEGORY_ID","CLOCK_ICON","getIconPath","colorType","GxIdeKbManagerImport","_GxIdeKbManagerImport__componentLocale","set","this","_GxIdeKbManagerImport_showAll","_GxIdeKbManagerImport_categoriesActionListItemGroupMap","Map","_GxIdeKbManagerImport_handleSelectionChange","event","eventType","_a","detail","item","itemAdditionalBase","dataTypeSelectedCallback","__classPrivateFieldGet","_GxIdeKbManagerImport_updateListBoxModelState","call","selectedCategory","recentlyUsedActionListModel","forEach","selected","selectedItemIndex","recentlyUsed","findIndex","has","group","get","groupUpdated","Object","assign","_GxIdeKbManagerImport_showAllObjects","allCategoriesActionListModel","counter","mapLength","size","key","keys","push","categoriesListBoxModel","__classPrivateFieldSet","_GxIdeKbManagerImport_showRecentlyObjects","selectedCategoryHandler","e","currentTarget","dataset","newSelectedCategory","_GxIdeKbManagerImport_renderFooter","recentlyUsedBtnClass","allBtnClass","selectedCategoryDescription","fixedTypes","all","h","class","length","select","title","onClick","src","categories","buttonClass","categoriesChanged","newCategories","clear","categoryListBoxModel","loading","recentlyUsedChanged","newRecentlyUsed","componentWillLoad","Locale","getComponentStrings","el","render","Host","model","loaderTitle","loader","description","show","selection","onSelectedItemsChange"],"sources":["src/components/data-type-selector/helpers.ts","src/components/data-type-selector/data-type-selector.scss?tag=gx-ide-data-type-selector&encapsulation=shadow","src/components/data-type-selector/data-type-selector.tsx"],"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",":host {\n  position: relative;\n  display: grid;\n  block-size: 100%;\n  overflow: auto;\n  grid-template-rows: 1fr max-content;\n\n  // WA: Prevent a custom css rule on genexus-web from overriding --control__border-width value.\n  // TDOO: remove this when the custom style is removed from genexus-web.\n  // custom stlye is: .gx-struct-editor .tabular-grid-cell {\n  //   --control__border-width: 0;\n  // }\n\n  --control__border-width: var(--mer-border__width--sm);\n  --control__border-radius: var(--mer-border__radius--sm);\n}\n\n.main {\n  display: contents;\n}\n\n.selected-category {\n  margin: 0;\n  text-transform: capitalize;\n  margin-inline-start: var(\n    --mer-spacing--md\n  ); // TODO: Create a semantic class in Mercury for this case.\n  white-space: nowrap;\n}\n\n.footer {\n  overflow: auto;\n}\n","// 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"],"mappings":"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"}

package/dist/genexus-ide-ui/{p-dd890eed.entry.js → p-c2ec8185.entry.js}

@@ -1,40 +1,77 @@
-import { r as e, h as t, H as i, g as o } from "./p-49712340.js";
-
-import { g as n } from "./p-b81d21d5.js";
-
-import { L as s } from "./p-311eedf3.js";
-
-const getInitialsFromName = e => {
-  const t = e.split(" ");
-  if (t.length === 1) {
+import { r as e, h as t, H as i, g as n } from "./p-49712340.js";
+
+import { g as o } from "./p-b81d21d5.js";
+
+import { L as r } from "./p-311eedf3.js";
+
+/**
+ * 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"
+ */ const getInitialsFromName = e => {
+  if (typeof e !== "string" || e.trim() === "") {
+    return "X";
+  }
+  const t = e.split(" ").filter(Boolean);
+ // Remove any empty strings from splitting
+    if (t.length === 1) {
     return t[0][0].toUpperCase();
   } else {
     return `${t[0][0].toUpperCase()}${t[1][0].toUpperCase()}`;
   }
 };
 
-const r = "@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}:host{display:inline-grid;justify-items:end;block-size:100%}.user-login__button{all:unset;display:grid;grid-template-columns:max-content max-content max-content;align-items:center;gap:var(--mer-spacing--sm);block-size:auto;cursor:pointer}.user-login__details{display:grid;grid-template-rows:max-content max-content;gap:var(--mer-spacing--3xs);justify-items:end}.user-login__name{font-weight:var(--mer-font__weight--medium);font-size:var(--mer-font__size--3xs);color:var(--mer-text__on-elevation)}.user-login__organization{font-weight:var(--mer-font__weight--light);font-size:var(--mer-font__size--4xs);color:var(--mer-text__neutral)}.user-login__avatar{font-size:9px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;block-size:var(--mer-spacing--lg);inline-size:var(--mer-spacing--lg);color:var(--mer-text__on-elevation);border-radius:50%;background-color:var(--mer-color__tinted-primary--10);border:var(--mer-border__width--sm) solid var(--mer-color__primary--200)}.privacy-policy{text-decoration:underline;cursor:pointer}";
+/**
+ * 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
+ */ const limitFullName = e => {
+  if (typeof e !== "string" || e.trim() === "") {
+    return null;
+  }
+  const t = e.split(" ").filter(Boolean);
+ // Remove any empty strings from splitting
+    if (t.length === 1) {
+    return t[0];
+  } else {
+    return `${t[0]} ${t[1]}`;
+  }
+};
+
+const s = "@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}:host{display:inline-grid;justify-items:end;block-size:100%}.user-login__button{all:unset;display:grid;grid-template-columns:max-content max-content max-content;align-items:center;gap:var(--mer-spacing--sm);block-size:auto;cursor:pointer}.user-login__details{display:grid;grid-template-rows:max-content max-content;gap:var(--mer-spacing--3xs);justify-items:end}.user-login__name{font-weight:var(--mer-font__weight--medium);font-size:var(--mer-font__size--3xs);color:var(--mer-text__on-elevation)}.user-login__organization{font-weight:var(--mer-font__weight--light);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;display:flex;align-items:center;justify-content:center;block-size:var(--mer-spacing--lg);inline-size:var(--mer-spacing--lg);color:var(--mer-text__on-elevation);border-radius:50%;background-color:var(--mer-color__tinted-primary--10);border:var(--mer-border__width--sm) solid var(--mer-color__primary--200)}.privacy-policy{text-decoration:underline;cursor:pointer}";
 
-var a = undefined && undefined.__classPrivateFieldSet || function(e, t, i, o, n) {
-  if (o === "m") throw new TypeError("Private method is not writable");
-  if (o === "a" && !n) throw new TypeError("Private accessor was defined without a setter");
-  if (typeof t === "function" ? e !== t || !n : !t.has(e)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
-  return o === "a" ? n.call(e, i) : n ? n.value = i : t.set(e, i), i;
+var a = undefined && undefined.__classPrivateFieldSet || function(e, t, i, n, o) {
+  if (n === "m") throw new TypeError("Private method is not writable");
+  if (n === "a" && !o) throw new TypeError("Private accessor was defined without a setter");
+  if (typeof t === "function" ? e !== t || !o : !t.has(e)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+  return n === "a" ? o.call(e, i) : o ? o.value = i : t.set(e, i), i;
 };
 
-var c = undefined && undefined.__classPrivateFieldGet || function(e, t, i, o) {
-  if (i === "a" && !o) throw new TypeError("Private accessor was defined without a getter");
-  if (typeof t === "function" ? e !== t || !o : !t.has(e)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
-  return i === "m" ? o : i === "a" ? o.call(e) : o ? o.value : t.get(e);
+var l = undefined && undefined.__classPrivateFieldGet || function(e, t, i, n) {
+  if (i === "a" && !n) throw new TypeError("Private accessor was defined without a getter");
+  if (typeof t === "function" ? e !== t || !n : !t.has(e)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+  return i === "m" ? n : i === "a" ? n.call(e) : n ? n.value : t.get(e);
 };
 
-var l, d, f, u, m;
+var c, d, f, u, p;
 
-const p = [ 
+const m = [ 
 // TODO: review if "utils/form--full" is required.
 "resets/box-sizing", "components/tooltip", "components/toggle", "components/icon", "components/dropdown", "utils/layout", "utils/typography", "utils/spacing", "chameleon/scrollbar" ];
 
-const h = n({
+const h = o({
   category: "navigation",
   name: "chevron-down",
   colorType: "neutral"
@@ -44,14 +81,14 @@ const g = "my-account";
 
 const _ = "change-team";
 
-const w = "sign-out";
+const v = "sign-out";
 
-const v = "language";
+const w = "language";
 
 const y = class {
   constructor(t) {
     e(this, t);
-    l.set(this, void 0);
+    c.set(this, void 0);
     d.set(this, "");
     // #mode: Mode;
         f.set(this, void 0);
@@ -62,14 +99,14 @@ const y = class {
     //     this.changeModeCallback(this.#mode);
     //   }
     // };
-        m.set(this, ((e, t, i) => {
+        p.set(this, ((e, t, i) => {
       if (i === g) {
         this.myAccountCallback();
       } else if (i === _) {
         this.changeTeamCallback();
-      } else if (i === w) {
-        this.signOutCallback();
       } else if (i === v) {
+        this.signOutCallback();
+      } else if (i === w) {
         this.changeLanguageCallback();
       }
     }));
@@ -83,67 +120,69 @@ const y = class {
     this.showTermsCallback = undefined;
   }
   async componentWillLoad() {
-    a(this, l, await s.getComponentStrings(this.el), "f");
+    a(this, c, await r.getComponentStrings(this.el), "f");
     a(this, d, getInitialsFromName(this.userInfo.name), "f");
     a(this, f, [ {
       id: g,
-      caption: c(this, l, "f").myAccountLabel,
+      caption: l(this, c, "f").myAccountLabel,
       showSeparator: false
     }, {
       id: _,
-      caption: c(this, l, "f").changeTeamLabel,
+      caption: l(this, c, "f").changeTeamLabel,
       showSeparator: false
     }, {
-      id: w,
-      caption: c(this, l, "f").signOutLabel,
+      id: v,
+      caption: l(this, c, "f").signOutLabel,
       showSeparator: true
     } ], "f");
   }
   render() {
+    var e, n;
+    const o = limitFullName((e = this.userInfo) === null || e === void 0 ? void 0 : e.name);
     return t(i, {
       class: "widget"
     }, t("ch-theme", {
-      model: p
+      model: m
     }), t("ch-dropdown-render", {
       class: "dropdown",
-      model: c(this, f, "f"),
+      model: l(this, f, "f"),
       position: "InsideEnd_OutsideEnd",
-      itemClickCallback: c(this, m, "f")
+      itemClickCallback: l(this, p, "f")
     }, t("button", {
       class: "user-login__button",
       ref: e => a(this, u, e, "f"),
       slot: "action"
     }, t("div", {
       class: "user-login__details"
-    }, t("span", {
+    }, o ? t("span", {
       class: "user-login__name"
-    }, this.userInfo.name), t("span", {
+    }, o) : null, ((n = this.userInfo) === null || n === void 0 ? void 0 : n.team) ? t("span", {
       class: "user-login__organization"
-    }, this.userInfo.team)), t("div", {
+    }, this.userInfo.team) : null), t("div", {
       class: "user-login__avatar"
-    }, c(this, d, "f")), t("ch-image", {
+    }, l(this, d, "f")), t("ch-image", {
       src: h,
       class: "icon-md",
-      containerRef: c(this, u, "f")
+      containerRef: l(this, u, "f")
     })), t("div", {
       class: "user-login__footer footer-slot",
       slot: "footer"
     }, t("p", {
       class: "text-body-regular-s privacy-policy",
       onClick: this.showTermsCallback
-    }, c(this, l, "f").privacyAndTerms))));
+    }, l(this, c, "f").privacyAndTerms))));
   }
   static get assetsDirs() {
     return [ "gx-ide-assets/current-user-info" ];
   }
   get el() {
-    return o(this);
+    return n(this);
   }
 };
 
-l = new WeakMap, d = new WeakMap, f = new WeakMap, u = new WeakMap, m = new WeakMap;
+c = new WeakMap, d = new WeakMap, f = new WeakMap, u = new WeakMap, p = new WeakMap;
 
-y.style = r;
+y.style = s;
 
 export { y as gx_ide_current_user_info };
-//# sourceMappingURL=p-dd890eed.entry.js.map
+//# sourceMappingURL=p-c2ec8185.entry.js.map

package/dist/genexus-ide-ui/p-c2ec8185.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["getInitialsFromName","name","trim","nameData","split","filter","Boolean","length","toUpperCase","limitFullName","fullName","fullNameData","currentUserInfoCss","CSS_BUNDLES","CHEVRON_DOWN_ICON","getIconPath","category","colorType","MY_ACCOUNT_ID","CHANGE_TEAM_ID","SIGN_OUT_ID","LANGUAGE_ID","GxIdeNewEnvironment","_GxIdeNewEnvironment_componentLocale","set","this","_GxIdeNewEnvironment_initials","_GxIdeNewEnvironment_menuDropdownModel","_GxIdeNewEnvironment_userLoginButton","_GxIdeNewEnvironment_dropDownitemClickHandler","_event","_target","itemId","myAccountCallback","changeTeamCallback","signOutCallback","changeLanguageCallback","componentWillLoad","__classPrivateFieldSet","Locale","getComponentStrings","el","userInfo","id","caption","__classPrivateFieldGet","myAccountLabel","showSeparator","changeTeamLabel","signOutLabel","render","userName","_a","h","Host","class","model","position","itemClickCallback","ref","slot","_b","team","src","containerRef","onClick","showTermsCallback","privacyAndTerms"],"sources":["src/components/current-user-info/helpers.tsx","src/components/current-user-info/current-user-info.scss?tag=gx-ide-current-user-info&encapsulation=shadow","src/components/current-user-info/current-user-info.tsx"],"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","@import \"../../../node_modules/@genexus/mercury/dist/mercury.scss\";\n\n:host {\n  display: inline-grid;\n  justify-items: end;\n  block-size: 100%;\n}\n\n.user-login {\n  &__button {\n    all: unset;\n    display: grid;\n    grid-template-columns: max-content max-content max-content;\n    align-items: center;\n    gap: var(--mer-spacing--sm);\n    block-size: auto;\n    cursor: pointer;\n  }\n  &__details {\n    display: grid;\n    grid-template-rows: max-content max-content;\n    gap: var(--mer-spacing--3xs);\n    justify-items: end;\n  }\n  &__name {\n    font-weight: var(--mer-font__weight--medium);\n    font-size: var(--mer-font__size--3xs);\n    color: var(--mer-text__on-elevation);\n  }\n  &__organization {\n    font-weight: var(--mer-font__weight--light);\n    font-size: var(--mer-font__size--4xs);\n    color: var(--mer-text__neutral);\n  }\n  &__name,\n  &__organization {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    max-inline-size: 120px;\n    display: inline-block;\n  }\n  &__avatar {\n    font-size: 9px;\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    block-size: var(--mer-spacing--lg);\n    inline-size: var(--mer-spacing--lg);\n    color: var(--mer-text__on-elevation);\n    border-radius: 50%;\n    background-color: var(--mer-color__tinted-primary--10);\n    border: var(--mer-border__width--sm) solid var(--mer-color__primary--200);\n  }\n}\n\n.privacy-policy {\n  text-decoration: underline;\n  cursor: pointer;\n}\n","/* 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"],"mappings":"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"}

package/dist/genexus-ide-ui/{p-6e993843.entry.js → p-d15caa11.entry.js}

@@ -27,11 +27,7 @@ const d = class {
     e(this, r);
     this.copyable = false;
     this.copyMessage = () => {
-      const e = JSON.stringify({
-        messageType: this.messageType,
-        message: this.message
-      }, null, 2);
-      navigator.clipboard.writeText(e);
+      navigator.clipboard.writeText(this.message);
       this.showCopiedMessage = true;
       setTimeout((() => {
         this.showCopiedMessage = false;
@@ -138,4 +134,4 @@ l = new WeakMap;
 d.style = t;
 
 export { d as gx_ide_ai_message };
-//# sourceMappingURL=p-6e993843.entry.js.map
+//# sourceMappingURL=p-d15caa11.entry.js.map

package/dist/genexus-ide-ui/p-d15caa11.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["aiMessageCss","COPY_ICON","getIconPath","category","name","colorType","GxIdeAiMessage","this","copyable","copyMessage","navigator","clipboard","writeText","message","showCopiedMessage","setTimeout","_GxIdeAiMessage_buttonMouseDownHandler","set","e","preventDefault","stopPropagation","evaluateMessageIsCopyable","messageType","evaluateCopyIcon","h","class","onClick","onMouseDown","__classPrivateFieldGet","src","componentWillLoad","_componentLocale","Locale","getComponentStrings","el","componentDidRender","visible","messagesList","parentElement","scrollTo","render","hidden","you","message__header","message__role","assistant","message__caption","translations","hiChar","filterValue"],"sources":["src/components/ai-assistant/ai-message.scss?tag=gx-ide-ai-message","src/components/ai-assistant/ai-message.tsx"],"sourcesContent":["@import \"../../global/gx-ide-mixins.scss\";\n\n:host {\n  font-family: var(--mer-font-family--primary);\n}\n/*--- Messages ---*/\n.message {\n  color: var(--mer-color__neutral-gray--100);\n  display: grid;\n  grid-template-rows: 0fr;\n  transition: grid-template-rows 100ms;\n  transition: grid-template-rows 100ms, -ms-grid-rows 100ms;\n  &__outer-wrapper {\n    overflow: hidden;\n  }\n  &__inner-wrapper {\n    padding: var(--mer-spacing--sm) var(--mer-spacing--sm);\n    border-radius: var(--mer-border__radius--sm);\n    border-inline-start: var(--mer-border__width--md) solid transparent;\n    background-color: var(--mer-color__neutral-gray--1200);\n    margin-block-start: var(--mer-spacing--xs);\n    position: relative;\n  }\n  &__header {\n    display: flex;\n    gap: var(--mer-spacing--xs);\n    justify-content: space-between;\n\n    .icon-md {\n      opacity: 0;\n    }\n\n    &--in-progress {\n      display: contents;\n    }\n  }\n  &__role {\n    &:before {\n      content: \"\";\n      display: grid;\n      place-self: center flex-end;\n      inline-size: 4px;\n      block-size: 4px;\n      border-radius: 50%;\n      background-color: currentcolor;\n    }\n\n    font-weight: var(--mer-font__weight--semi-bold);\n    margin-block-end: var(--mer-spacing--xs);\n    display: inline-grid;\n    grid-template-columns: max-content 1fr;\n    gap: 8px;\n\n    &-description {\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      display: inline-block;\n      padding-block-start: 2px;\n    }\n    &--user {\n      color: var(--mer-color__primary--300);\n    }\n    &--assistant {\n    }\n    &--hidden {\n      display: none;\n    }\n  }\n  &__caption {\n    font-size: var(--mer-font__size--xs);\n    line-height: var(--mer-line-height--regular);\n  }\n  &--visible {\n    grid-template-rows: 1fr;\n  }\n  &--copying {\n    pointer-events: none;\n    span:not(.copied),\n    .message__caption {\n      color: transparent;\n      -webkit-user-select: none; /* Safari */\n      -ms-user-select: none; /* IE 10 and IE 11 */\n      user-select: none; /* Standard syntax */\n    }\n  }\n  /*--- Types of messages ---*/\n  &--user {\n    .message__inner-wrapper {\n      background-color: rgba(91, 167, 255, 0.08);\n      border-color: var(--mer-border-color__primary);\n    }\n  }\n  &--assistant-action {\n    .message__inner-wrapper {\n      background-color: rgba(63, 168, 155, 0.05);\n      border-color: var(--mer-border-color__success);\n    }\n  }\n  &--assistant-chat {\n    .message__inner-wrapper {\n      background-color: var(--mer-surface__elevation--01);\n    }\n  }\n  &--assistant-in-progress {\n    color: var(--mer-color__neutral-gray--500);\n    .message__inner-wrapper {\n      font-style: italic;\n      display: grid;\n      grid-template-columns: 1fr auto;\n      gap: var(--mer-spacing--xs);\n\n      .message__caption {\n        flex: 1;\n      }\n      .animation-wrapper {\n        flex: none;\n      }\n    }\n  }\n  &--assistant-error {\n    .message__inner-wrapper {\n      background-color: rgba(251, 124, 132, 0.05);\n      border-color: var(--mer-border-color__error);\n    }\n  }\n  &--copyable {\n    &:hover {\n      filter: brightness(1.2);\n      .icon-md {\n        opacity: 1;\n      }\n    }\n  }\n  &:last-child {\n    margin-block-end: 0;\n  }\n}\n:host(:first-child) {\n  .message {\n    &__inner-wrapper {\n      margin-block-end: 0;\n    }\n  }\n}\n\n/*--- Dot Pulse Sweet Animation ---*/\n.animation-wrapper {\n  width: 45px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n$color: var(--mer-color__neutral-gray--400);\n.dot-pulse {\n  position: relative;\n  left: -9999px;\n  width: 5px;\n  height: 5px;\n  border-radius: 2.5px;\n  background-color: $color;\n  color: $color;\n  box-shadow: 9999px 0 0 -5px;\n  animation: dot-pulse 1.5s infinite linear;\n  animation-delay: 0.25s;\n  &::before,\n  &::after {\n    content: \"\";\n    display: inline-block;\n    position: absolute;\n    top: 0;\n    width: 5px;\n    height: 5px;\n    border-radius: 2.5px;\n    background-color: $color;\n    color: $color;\n  }\n  &::before {\n    box-shadow: 9984px 0 0 -5px;\n    animation: dot-pulse-before 1.5s infinite linear;\n    animation-delay: 0s;\n  }\n  &::after {\n    box-shadow: 10014px 0 0 -5px;\n    animation: dot-pulse-after 1.5s infinite linear;\n    animation-delay: 0.5s;\n  }\n}\n@keyframes dot-pulse-before {\n  0% {\n    box-shadow: 9984px 0 0 -5px;\n  }\n  30% {\n    box-shadow: 9984px 0 0 2px;\n  }\n  60%,\n  100% {\n    box-shadow: 9984px 0 0 -5px;\n  }\n}\n@keyframes dot-pulse {\n  0% {\n    box-shadow: 9999px 0 0 -5px;\n  }\n  30% {\n    box-shadow: 9999px 0 0 2px;\n  }\n  60%,\n  100% {\n    box-shadow: 9999px 0 0 -5px;\n  }\n}\n@keyframes dot-pulse-after {\n  0% {\n    box-shadow: 10014px 0 0 -5px;\n  }\n  30% {\n    box-shadow: 10014px 0 0 2px;\n  }\n  60%,\n  100% {\n    box-shadow: 10014px 0 0 -5px;\n  }\n}\n\n/*--- Copy Message ---*/\n.copied {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mer-color__neutral-gray--300);\n  display: flex;\n  gap: var(--mer-spacing--xs);\n  opacity: 0;\n  animation: fadeIn var(--mer-timing--regular) ease-out forwards;\n}\n\n@keyframes fadeIn {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n\n@include hiChar;\n","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    navigator.clipboard.writeText(this.message);\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"],"mappings":";;;;;;;;AAAA,MAAMA,IAAe;;;;;;;;;;ACQrB,MAAMC,IAAYC,EAAY;EAC5BC,UAAU;EACVC,MAAM;EACNC,WAAW;;;MASAC,IAAc;;;IAGjBC,KAAAC,WAAW;IA0DXD,KAAAE,cAAc;MACpBC,UAAUC,UAAUC,UAAUL,KAAKM;MACnCN,KAAKO,oBAAoB;MACzBC,YAAW;QACTR,KAAKO,oBAAoB;AAAK,UAC7B;AAAK;IAGVE,EAAAC,IAAAV,OAA2BW;MACzBA,EAAEC;MACFD,EAAEE;AAAiB;IAGbb,KAAAc,4BAA4B;MAClCd,KAAKC,WAAWD,KAAKe,gBAAgB;AAAuB;IAGtDf,KAAAgB,mBAAmB,MAClBhB,KAAKC,WACVgB,EAAA;MACEC,OAAM;MAAkC,cAC7B;MACXC,SAASnB,KAAKE;MACdkB,aAAaC,EAAArB,MAAIS,GAAA;OAEjBQ,EAAA;MAAUC,OAAM;MAAUI,KAAK5B;UAE/B;mBA9Ea;6BAKU;;;;;;;;EAgC7B,uBAAM6B;IACJvB,KAAKwB,yBAAyBC,EAAOC,oBAAoB1B,KAAK2B;IAC9D3B,KAAKc;;EAGP,kBAAAc;IACEpB,YAAW;;MAETR,KAAK6B,UAAU;MACf,MAAMC,IAAe9B,KAAK2B,GAAGI;MAC7BD,EAAaE,SAAS,GAAG;AAAE,QAC1B;;EAiCL,MAAAC;IACE,OACEhB,EAAA;MACEC,OAAO;QACLZ,SAAW;QACX,oBAAoBN,KAAK6B,YAAY7B,KAAKkC;QAC1C,CAAC,YAAY,EAAClC,KAAKe,kBAAiB;QACpC,sBAAsBf,KAAKe,gBAAgB;QAC3C,qBAAqBf,KAAKC;QAC1B,oBAAoBD,KAAKO;;OAG3BU,EAAA;MAAKC,OAAM;OACTD,EAAA;MACEC,OAAO;QACL,0BAA0B;;OAG3BlB,KAAKe,gBAAgB,SACpBE,EAAA;MAAKC,OAAM;OACTD,EAAA;MAAMC,OAAM;OACVD,EAAA;MAAMC,OAAM;OACTlB,KAAKwB,iBAAiBW,OAG1BnC,KAAKgB,sBAGRC,EAAA;MACEC,OAAO;QACLkB,iBAAmB;QACnB,gCACEpC,KAAKe,gBAAgB;;OAGzBE,EAAA;MACEC,OAAO;QACLmB,eACErC,KAAKe,gBAAgB;QACvB,yBACEf,KAAKe,gBAAgB;QACvB,4BAA4B;;OAG9BE,EAAA;MAAMC,OAAM;OACTlB,KAAKwB,iBAAiBc,aAG1BtC,KAAKgB,qBAGVC,EAAA;MACEC,OAAO;QACLqB,kBAAoB;QACpB,iCACEvC,KAAKe,gBAAgB;;OAGxBf,KAAKO,oBACJU,EAAA;MAAMC,OAAM;OACVD,EAAA;MAAUC,OAAM;MAAUI,KAAK5B;QAC9BM,KAAKwC,aAAa,aAEnB,MACHC,EAAOzC,KAAKM,SAASN,KAAK0C,eAE5B1C,KAAKe,gBAAgB,0BACpBE,EAAA;MAAKC,OAAM;OACTD,EAAA;MAAKC,OAAM;UAEX"}

package/dist/types/components/current-user-info/helpers.d.ts

@@ -1 +1,24 @@
-export declare const getInitialsFromName: (name: string) => string;
+/**
+ * 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 declare const getInitialsFromName: (name: string) => string | null;
+/**
+ * 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 declare const limitFullName: (fullName: string) => string | null;

package/dist/types/components/data-type-selector/data-type-selector.d.ts

@@ -0,0 +1,46 @@
+import { ActionListItemModel, ActionListModel } from "@genexus/chameleon-controls-library";
+export declare class GxIdeKbManagerImport {
+    #private;
+    el: HTMLGxIdeDataTypeSelectorElement;
+    categoriesListBoxModel: ActionListItemModel[];
+    selectedCategory: string;
+    statusInfo: StatusInfo[];
+    recentlyUsedActionListModel: ActionListModel;
+    loading: boolean;
+    /**
+     * All possible types and its category
+     */
+    readonly categories: DataTypeCategoryData[];
+    categoriesChanged(newCategories: DataTypeCategoryData[]): void;
+    /**
+     * Callback invoked when user select an item type
+     */
+    readonly dataTypeSelectedCallback: DataTypeSelectedCallback;
+    /**
+     * All recently used types list
+     */
+    readonly recentlyUsed: DataTypeData[];
+    recentlyUsedChanged(newRecentlyUsed: DataTypeData[]): void;
+    componentWillLoad(): Promise<void>;
+    private selectedCategoryHandler;
+    render(): void;
+}
+type StatusInfo = {
+    [key: string]: {
+        display: boolean;
+    };
+};
+export type DataTypeCategoryData = {
+    name: string;
+    icon: string;
+    types: DataTypeData[];
+};
+export type DataTypeData = {
+    name: string;
+    icon: string;
+};
+export type DataTypeSelectedCallback = (data: {
+    name: string;
+    icon: string;
+}) => Promise<void>;
+export {};

package/dist/types/components/data-type-selector/helpers.d.ts

@@ -0,0 +1,4 @@
+import { DataTypeCategoryData, DataTypeData } from "./data-type-selector";
+import { ActionListItemGroup, ActionListModel } from "@genexus/chameleon-controls-library/dist/types/components/action-list/types";
+export declare const mapCategoryToListItemGroup: (category: DataTypeCategoryData) => ActionListItemGroup;
+export declare const mapDataTypesToList: (dataTypes: DataTypeData[]) => ActionListModel;

package/dist/types/components.d.ts

@@ -26,6 +26,7 @@ import { KBData, KBVersion, KnowledgeBaseInfo } from "./components/team-dev/crea
 import { Mode, UserInfo } from "./components/current-user-info/current-user-info";
 import { EditResult, EnvironmentData, KBData as KBData1, recentObjectData } from "./components/dashboard-home/dashboard-home";
 import { CancelCallback as CancelCallback3, ConfirmCallback as ConfirmCallback2, EditCallback, LoadItemsCallback, NewVariableCallback, SelectObjectCallback } from "./components/data-selector/data-selector";
+import { DataTypeCategoryData, DataTypeData, DataTypeSelectedCallback } from "./components/data-type-selector/data-type-selector";
 import { CancelCallback as CancelCallback4, ConfirmCallback as ConfirmCallback3, LoadCallback, LoadDesignSystemCallback, LoadFontCallback, LoadImageCallback, LoadPanelDataCallback, ReactiveSettings, RequiresAccessTokenCallback, SelectModuleCallback, TextEditorFactoryCallback } from "./components/design-import/design-import";
 import { DirectorySelectorLabels, LabelPosition } from "./components/_helpers/directory-selector/directory-selector";
 import { ModuleServerData, ModuleServerType } from "./components/modules/types";
@@ -79,6 +80,7 @@ export { KBData, KBVersion, KnowledgeBaseInfo } from "./components/team-dev/crea
 export { Mode, UserInfo } from "./components/current-user-info/current-user-info";
 export { EditResult, EnvironmentData, KBData as KBData1, recentObjectData } from "./components/dashboard-home/dashboard-home";
 export { CancelCallback as CancelCallback3, ConfirmCallback as ConfirmCallback2, EditCallback, LoadItemsCallback, NewVariableCallback, SelectObjectCallback } from "./components/data-selector/data-selector";
+export { DataTypeCategoryData, DataTypeData, DataTypeSelectedCallback } from "./components/data-type-selector/data-type-selector";
 export { CancelCallback as CancelCallback4, ConfirmCallback as ConfirmCallback3, LoadCallback, LoadDesignSystemCallback, LoadFontCallback, LoadImageCallback, LoadPanelDataCallback, ReactiveSettings, RequiresAccessTokenCallback, SelectModuleCallback, TextEditorFactoryCallback } from "./components/design-import/design-import";
 export { DirectorySelectorLabels, LabelPosition } from "./components/_helpers/directory-selector/directory-selector";
 export { ModuleServerData, ModuleServerType } from "./components/modules/types";
@@ -670,6 +672,20 @@ export namespace Components {
          */
         "validate": () => Promise<boolean>;
     }
+    interface GxIdeDataTypeSelector {
+        /**
+          * All possible types and its category
+         */
+        "categories": DataTypeCategoryData[];
+        /**
+          * Callback invoked when user select an item type
+         */
+        "dataTypeSelectedCallback": DataTypeSelectedCallback;
+        /**
+          * All recently used types list
+         */
+        "recentlyUsed": DataTypeData[];
+    }
     interface GxIdeDesignImport {
         /**
           * The access token for the given path, which is not always required
@@ -2270,6 +2286,12 @@ declare global {
         prototype: HTMLGxIdeDataSelectorElement;
         new (): HTMLGxIdeDataSelectorElement;
     };
+    interface HTMLGxIdeDataTypeSelectorElement extends Components.GxIdeDataTypeSelector, HTMLStencilElement {
+    }
+    var HTMLGxIdeDataTypeSelectorElement: {
+        prototype: HTMLGxIdeDataTypeSelectorElement;
+        new (): HTMLGxIdeDataTypeSelectorElement;
+    };
     interface HTMLGxIdeDesignImportElement extends Components.GxIdeDesignImport, HTMLStencilElement {
     }
     var HTMLGxIdeDesignImportElement: {
@@ -2778,6 +2800,7 @@ declare global {
         "gx-ide-current-user-info": HTMLGxIdeCurrentUserInfoElement;
         "gx-ide-dashboard-home": HTMLGxIdeDashboardHomeElement;
         "gx-ide-data-selector": HTMLGxIdeDataSelectorElement;
+        "gx-ide-data-type-selector": HTMLGxIdeDataTypeSelectorElement;
         "gx-ide-design-import": HTMLGxIdeDesignImportElement;
         "gx-ide-directory-selector": HTMLGxIdeDirectorySelectorElement;
         "gx-ide-edit-module-server": HTMLGxIdeEditModuleServerElement;
@@ -3407,6 +3430,20 @@ declare namespace LocalJSX {
          */
         "selectionType"?: "single" | "multiple";
     }
+    interface GxIdeDataTypeSelector {
+        /**
+          * All possible types and its category
+         */
+        "categories"?: DataTypeCategoryData[];
+        /**
+          * Callback invoked when user select an item type
+         */
+        "dataTypeSelectedCallback"?: DataTypeSelectedCallback;
+        /**
+          * All recently used types list
+         */
+        "recentlyUsed"?: DataTypeData[];
+    }
     interface GxIdeDesignImport {
         /**
           * The access token for the given path, which is not always required
@@ -4765,6 +4802,7 @@ declare namespace LocalJSX {
         "gx-ide-current-user-info": GxIdeCurrentUserInfo;
         "gx-ide-dashboard-home": GxIdeDashboardHome;
         "gx-ide-data-selector": GxIdeDataSelector;
+        "gx-ide-data-type-selector": GxIdeDataTypeSelector;
         "gx-ide-design-import": GxIdeDesignImport;
         "gx-ide-directory-selector": GxIdeDirectorySelector;
         "gx-ide-edit-module-server": GxIdeEditModuleServer;
@@ -4827,6 +4865,7 @@ declare module "@stencil/core" {
             "gx-ide-current-user-info": LocalJSX.GxIdeCurrentUserInfo & JSXBase.HTMLAttributes<HTMLGxIdeCurrentUserInfoElement>;
             "gx-ide-dashboard-home": LocalJSX.GxIdeDashboardHome & JSXBase.HTMLAttributes<HTMLGxIdeDashboardHomeElement>;
             "gx-ide-data-selector": LocalJSX.GxIdeDataSelector & JSXBase.HTMLAttributes<HTMLGxIdeDataSelectorElement>;
+            "gx-ide-data-type-selector": LocalJSX.GxIdeDataTypeSelector & JSXBase.HTMLAttributes<HTMLGxIdeDataTypeSelectorElement>;
             "gx-ide-design-import": LocalJSX.GxIdeDesignImport & JSXBase.HTMLAttributes<HTMLGxIdeDesignImportElement>;
             "gx-ide-directory-selector": LocalJSX.GxIdeDirectorySelector & JSXBase.HTMLAttributes<HTMLGxIdeDirectorySelectorElement>;
             "gx-ide-edit-module-server": LocalJSX.GxIdeEditModuleServer & JSXBase.HTMLAttributes<HTMLGxIdeEditModuleServerElement>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genexus/genexus-ide-ui",
   "license": "Apache-2.0",
-  "version": "1.0.39",
+  "version": "1.0.41",
   "description": "GeneXus IDE UI components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -46,6 +46,7 @@
     "@stencil/core": "~4.9.0",
     "@stencil/sass": "~1.4.0",
     "@types/jest": "~29.5.1",
+    "@types/ws": "^8.5.13",
     "@typescript-eslint/eslint-plugin": "^6.15.0",
     "@typescript-eslint/parser": "^6.15.0",
     "eslint": "^8.56.0",

package/dist/genexus-ide-ui/p-6e993843.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["aiMessageCss","COPY_ICON","getIconPath","category","name","colorType","GxIdeAiMessage","this","copyable","copyMessage","messageInfo","JSON","stringify","messageType","message","navigator","clipboard","writeText","showCopiedMessage","setTimeout","_GxIdeAiMessage_buttonMouseDownHandler","set","e","preventDefault","stopPropagation","evaluateMessageIsCopyable","evaluateCopyIcon","h","class","onClick","onMouseDown","__classPrivateFieldGet","src","componentWillLoad","_componentLocale","Locale","getComponentStrings","el","componentDidRender","visible","messagesList","parentElement","scrollTo","render","hidden","you","message__header","message__role","assistant","message__caption","translations","hiChar","filterValue"],"sources":["src/components/ai-assistant/ai-message.scss?tag=gx-ide-ai-message","src/components/ai-assistant/ai-message.tsx"],"sourcesContent":["@import \"../../global/gx-ide-mixins.scss\";\n\n:host {\n  font-family: var(--mer-font-family--primary);\n}\n/*--- Messages ---*/\n.message {\n  color: var(--mer-color__neutral-gray--100);\n  display: grid;\n  grid-template-rows: 0fr;\n  transition: grid-template-rows 100ms;\n  transition: grid-template-rows 100ms, -ms-grid-rows 100ms;\n  &__outer-wrapper {\n    overflow: hidden;\n  }\n  &__inner-wrapper {\n    padding: var(--mer-spacing--sm) var(--mer-spacing--sm);\n    border-radius: var(--mer-border__radius--sm);\n    border-inline-start: var(--mer-border__width--md) solid transparent;\n    background-color: var(--mer-color__neutral-gray--1200);\n    margin-block-start: var(--mer-spacing--xs);\n    position: relative;\n  }\n  &__header {\n    display: flex;\n    gap: var(--mer-spacing--xs);\n    justify-content: space-between;\n\n    .icon-md {\n      opacity: 0;\n    }\n\n    &--in-progress {\n      display: contents;\n    }\n  }\n  &__role {\n    &:before {\n      content: \"\";\n      display: grid;\n      place-self: center flex-end;\n      inline-size: 4px;\n      block-size: 4px;\n      border-radius: 50%;\n      background-color: currentcolor;\n    }\n\n    font-weight: var(--mer-font__weight--semi-bold);\n    margin-block-end: var(--mer-spacing--xs);\n    display: inline-grid;\n    grid-template-columns: max-content 1fr;\n    gap: 8px;\n\n    &-description {\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      display: inline-block;\n      padding-block-start: 2px;\n    }\n    &--user {\n      color: var(--mer-color__primary--300);\n    }\n    &--assistant {\n    }\n    &--hidden {\n      display: none;\n    }\n  }\n  &__caption {\n    font-size: var(--mer-font__size--xs);\n    line-height: var(--mer-line-height--regular);\n  }\n  &--visible {\n    grid-template-rows: 1fr;\n  }\n  &--copying {\n    pointer-events: none;\n    span:not(.copied),\n    .message__caption {\n      color: transparent;\n      -webkit-user-select: none; /* Safari */\n      -ms-user-select: none; /* IE 10 and IE 11 */\n      user-select: none; /* Standard syntax */\n    }\n  }\n  /*--- Types of messages ---*/\n  &--user {\n    .message__inner-wrapper {\n      background-color: rgba(91, 167, 255, 0.08);\n      border-color: var(--mer-border-color__primary);\n    }\n  }\n  &--assistant-action {\n    .message__inner-wrapper {\n      background-color: rgba(63, 168, 155, 0.05);\n      border-color: var(--mer-border-color__success);\n    }\n  }\n  &--assistant-chat {\n    .message__inner-wrapper {\n      background-color: var(--mer-surface__elevation--01);\n    }\n  }\n  &--assistant-in-progress {\n    color: var(--mer-color__neutral-gray--500);\n    .message__inner-wrapper {\n      font-style: italic;\n      display: grid;\n      grid-template-columns: 1fr auto;\n      gap: var(--mer-spacing--xs);\n\n      .message__caption {\n        flex: 1;\n      }\n      .animation-wrapper {\n        flex: none;\n      }\n    }\n  }\n  &--assistant-error {\n    .message__inner-wrapper {\n      background-color: rgba(251, 124, 132, 0.05);\n      border-color: var(--mer-border-color__error);\n    }\n  }\n  &--copyable {\n    &:hover {\n      filter: brightness(1.2);\n      .icon-md {\n        opacity: 1;\n      }\n    }\n  }\n  &:last-child {\n    margin-block-end: 0;\n  }\n}\n:host(:first-child) {\n  .message {\n    &__inner-wrapper {\n      margin-block-end: 0;\n    }\n  }\n}\n\n/*--- Dot Pulse Sweet Animation ---*/\n.animation-wrapper {\n  width: 45px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n$color: var(--mer-color__neutral-gray--400);\n.dot-pulse {\n  position: relative;\n  left: -9999px;\n  width: 5px;\n  height: 5px;\n  border-radius: 2.5px;\n  background-color: $color;\n  color: $color;\n  box-shadow: 9999px 0 0 -5px;\n  animation: dot-pulse 1.5s infinite linear;\n  animation-delay: 0.25s;\n  &::before,\n  &::after {\n    content: \"\";\n    display: inline-block;\n    position: absolute;\n    top: 0;\n    width: 5px;\n    height: 5px;\n    border-radius: 2.5px;\n    background-color: $color;\n    color: $color;\n  }\n  &::before {\n    box-shadow: 9984px 0 0 -5px;\n    animation: dot-pulse-before 1.5s infinite linear;\n    animation-delay: 0s;\n  }\n  &::after {\n    box-shadow: 10014px 0 0 -5px;\n    animation: dot-pulse-after 1.5s infinite linear;\n    animation-delay: 0.5s;\n  }\n}\n@keyframes dot-pulse-before {\n  0% {\n    box-shadow: 9984px 0 0 -5px;\n  }\n  30% {\n    box-shadow: 9984px 0 0 2px;\n  }\n  60%,\n  100% {\n    box-shadow: 9984px 0 0 -5px;\n  }\n}\n@keyframes dot-pulse {\n  0% {\n    box-shadow: 9999px 0 0 -5px;\n  }\n  30% {\n    box-shadow: 9999px 0 0 2px;\n  }\n  60%,\n  100% {\n    box-shadow: 9999px 0 0 -5px;\n  }\n}\n@keyframes dot-pulse-after {\n  0% {\n    box-shadow: 10014px 0 0 -5px;\n  }\n  30% {\n    box-shadow: 10014px 0 0 2px;\n  }\n  60%,\n  100% {\n    box-shadow: 10014px 0 0 -5px;\n  }\n}\n\n/*--- Copy Message ---*/\n.copied {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mer-color__neutral-gray--300);\n  display: flex;\n  gap: var(--mer-spacing--xs);\n  opacity: 0;\n  animation: fadeIn var(--mer-timing--regular) ease-out forwards;\n}\n\n@keyframes fadeIn {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n\n@include hiChar;\n","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"],"mappings":";;;;;;;;AAAA,MAAMA,IAAe;;;;;;;;;;ACQrB,MAAMC,IAAYC,EAAY;EAC5BC,UAAU;EACVC,MAAM;EACNC,WAAW;;;MASAC,IAAc;;;IAGjBC,KAAAC,WAAW;IA0DXD,KAAAE,cAAc;MACpB,MAAMC,IAAcC,KAAKC,UACvB;QACEC,aAAaN,KAAKM;QAClBC,SAASP,KAAKO;SAEhB,MACA;MAGFC,UAAUC,UAAUC,UAAUP;MAC9BH,KAAKW,oBAAoB;MACzBC,YAAW;QACTZ,KAAKW,oBAAoB;AAAK,UAC7B;AAAK;IAGVE,EAAAC,IAAAd,OAA2Be;MACzBA,EAAEC;MACFD,EAAEE;AAAiB;IAGbjB,KAAAkB,4BAA4B;MAClClB,KAAKC,WAAWD,KAAKM,gBAAgB;AAAuB;IAGtDN,KAAAmB,mBAAmB,MAClBnB,KAAKC,WACVmB,EAAA;MACEC,OAAM;MAAkC,cAC7B;MACXC,SAAStB,KAAKE;MACdqB,aAAaC,EAAAxB,MAAIa,GAAA;OAEjBO,EAAA;MAAUC,OAAM;MAAUI,KAAK/B;UAE/B;mBAvFa;6BAKU;;;;;;;;EAgC7B,uBAAMgC;IACJ1B,KAAK2B,yBAAyBC,EAAOC,oBAAoB7B,KAAK8B;IAC9D9B,KAAKkB;;EAGP,kBAAAa;IACEnB,YAAW;;MAETZ,KAAKgC,UAAU;MACf,MAAMC,IAAejC,KAAK8B,GAAGI;MAC7BD,EAAaE,SAAS,GAAG;AAAE,QAC1B;;EA0CL,MAAAC;IACE,OACEhB,EAAA;MACEC,OAAO;QACLd,SAAW;QACX,oBAAoBP,KAAKgC,YAAYhC,KAAKqC;QAC1C,CAAC,YAAY,EAACrC,KAAKM,kBAAiB;QACpC,sBAAsBN,KAAKM,gBAAgB;QAC3C,qBAAqBN,KAAKC;QAC1B,oBAAoBD,KAAKW;;OAG3BS,EAAA;MAAKC,OAAM;OACTD,EAAA;MACEC,OAAO;QACL,0BAA0B;;OAG3BrB,KAAKM,gBAAgB,SACpBc,EAAA;MAAKC,OAAM;OACTD,EAAA;MAAMC,OAAM;OACVD,EAAA;MAAMC,OAAM;OACTrB,KAAK2B,iBAAiBW,OAG1BtC,KAAKmB,sBAGRC,EAAA;MACEC,OAAO;QACLkB,iBAAmB;QACnB,gCACEvC,KAAKM,gBAAgB;;OAGzBc,EAAA;MACEC,OAAO;QACLmB,eACExC,KAAKM,gBAAgB;QACvB,yBACEN,KAAKM,gBAAgB;QACvB,4BAA4B;;OAG9Bc,EAAA;MAAMC,OAAM;OACTrB,KAAK2B,iBAAiBc,aAG1BzC,KAAKmB,qBAGVC,EAAA;MACEC,OAAO;QACLqB,kBAAoB;QACpB,iCACE1C,KAAKM,gBAAgB;;OAGxBN,KAAKW,oBACJS,EAAA;MAAMC,OAAM;OACVD,EAAA;MAAUC,OAAM;MAAUI,KAAK/B;QAC9BM,KAAK2C,aAAa,aAEnB,MACHC,EAAO5C,KAAKO,SAASP,KAAK6C,eAE5B7C,KAAKM,gBAAgB,0BACpBc,EAAA;MAAKC,OAAM;OACTD,EAAA;MAAKC,OAAM;UAEX"}

package/dist/genexus-ide-ui/p-dd890eed.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["getInitialsFromName","name","nameData","split","length","toUpperCase","currentUserInfoCss","CSS_BUNDLES","CHEVRON_DOWN_ICON","getIconPath","category","colorType","MY_ACCOUNT_ID","CHANGE_TEAM_ID","SIGN_OUT_ID","LANGUAGE_ID","GxIdeNewEnvironment","_GxIdeNewEnvironment_componentLocale","set","this","_GxIdeNewEnvironment_initials","_GxIdeNewEnvironment_menuDropdownModel","_GxIdeNewEnvironment_userLoginButton","_GxIdeNewEnvironment_dropDownitemClickHandler","_event","_target","itemId","myAccountCallback","changeTeamCallback","signOutCallback","changeLanguageCallback","componentWillLoad","__classPrivateFieldSet","Locale","getComponentStrings","el","userInfo","id","caption","__classPrivateFieldGet","myAccountLabel","showSeparator","changeTeamLabel","signOutLabel","render","h","Host","class","model","position","itemClickCallback","ref","slot","team","src","containerRef","onClick","showTermsCallback","privacyAndTerms"],"sources":["src/components/current-user-info/helpers.tsx","src/components/current-user-info/current-user-info.scss?tag=gx-ide-current-user-info&encapsulation=shadow","src/components/current-user-info/current-user-info.tsx"],"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","@import \"../../../node_modules/@genexus/mercury/dist/mercury.scss\";\n\n:host {\n  display: inline-grid;\n  justify-items: end;\n  block-size: 100%;\n}\n\n.user-login {\n  &__button {\n    all: unset;\n    display: grid;\n    grid-template-columns: max-content max-content max-content;\n    align-items: center;\n    gap: var(--mer-spacing--sm);\n    block-size: auto;\n    cursor: pointer;\n  }\n  &__details {\n    display: grid;\n    grid-template-rows: max-content max-content;\n    gap: var(--mer-spacing--3xs);\n    justify-items: end;\n  }\n  &__name {\n    font-weight: var(--mer-font__weight--medium);\n    font-size: var(--mer-font__size--3xs);\n    color: var(--mer-text__on-elevation);\n  }\n  &__organization {\n    font-weight: var(--mer-font__weight--light);\n    font-size: var(--mer-font__size--4xs);\n    color: var(--mer-text__neutral);\n  }\n  &__avatar {\n    font-size: 9px;\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    block-size: var(--mer-spacing--lg);\n    inline-size: var(--mer-spacing--lg);\n    color: var(--mer-text__on-elevation);\n    border-radius: 50%;\n    background-color: var(--mer-color__tinted-primary--10);\n    border: var(--mer-border__width--sm) solid var(--mer-color__primary--200);\n  }\n}\n\n.privacy-policy {\n  text-decoration: underline;\n  cursor: pointer;\n}\n","/* 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"],"mappings":";;;;;;AAAO,MAAMA,sBAAuBC;EAClC,MAAMC,IAAWD,EAAKE,MAAM;EAC5B,IAAID,EAASE,WAAW,GAAG;IACzB,OAAOF,EAAS,GAAG,GAAGG;SACjB;IACL,OAAO,GAAGH,EAAS,GAAG,GAAGG,gBAAgBH,EAAS,GAAG,GAAGG;;;;ACL5D,MAAMC,IAAqB;;;;;;;;;;;;;;;;;ACS3B,MAAMC,IAA8B;;AAElC,qBACA,sBACA,qBACA,mBACA,uBACA,gBACA,oBACA,iBACA;;AAGF,MAAMC,IAAoBC,EAAY;EACpCC,UAAU;EACVT,MAAM;EACNU,WAAW;;;AAGb,MAAMC,IAAgB;;AACtB,MAAMC,IAAiB;;AACvB,MAAMC,IAAc;;AACpB,MAAMC,IAAc;;MAQPC,IAAmB;;;IAC9BC,EAAAC,IAAAC,WAAA;IACAC,EAAAF,IAAAC,MAAoB;;QAEpBE,EAAAH,IAAAC,WAAA;IAGAG,EAAAJ,IAAAC,WAAA;;;;;;;QAyEAI,EAAAL,IAAAC,OAA4B,CAC1BK,GACAC,GACAC;MAEA,IAAIA,MAAWd,GAAe;QAC5BO,KAAKQ;aACA,IAAID,MAAWb,GAAgB;QACpCM,KAAKS;aACA,IAAIF,MAAWZ,GAAa;QACjCK,KAAKU;aACA,IAAIH,MAAWX,GAAa;QACjCI,KAAKW;;;oBAnFoB;;;;;;;;;EAqC7B,uBAAMC;IACJC,EAAAb,MAAIF,SAA0BgB,EAAOC,oBAAoBf,KAAKgB,KAAG;IACjEH,EAAAb,MAAIC,GAAapB,oBAAoBmB,KAAKiB,SAASnC,OAAK;IACxD+B,EAAAb,MAAIE,GAAsB,EACxB;MACEgB,IAAIzB;MACJ0B,SAASC,EAAApB,MAAIF,GAAA,KAAkBuB;MAC/BC,eAAe;OAEjB;MACEJ,IAAIxB;MACJyB,SAASC,EAAApB,MAAIF,GAAA,KAAkByB;MAC/BD,eAAe;OAEjB;MACEJ,IAAIvB;MACJwB,SAASC,EAAApB,MAAIF,GAAA,KAAkB0B;MAC/BF,eAAe;SAOlB;;EA0BH,MAAAG;IACE,OACEC,EAACC,GAAI;MAACC,OAAM;OACVF,EAAA;MAAUG,OAAOzC;QACjBsC,EAAA;MACEE,OAAM;MACNC,OAAOT,EAAApB,MAAIE,GAAA;MACX4B,UAAS;MACTC,mBAAmBX,EAAApB,MAAII,GAAA;OAEvBsB,EAAA;MACEE,OAAM;MACNI,KAAKhB,KAAOH,EAAAb,MAAIG,GAAoBa,GAAuB;MAC3DiB,MAAK;OAELP,EAAA;MAAKE,OAAM;OACTF,EAAA;MAAME,OAAM;OAAoB5B,KAAKiB,SAASnC,OAC9C4C,EAAA;MAAME,OAAM;OAA4B5B,KAAKiB,SAASiB,QAExDR,EAAA;MAAKE,OAAM;OAAsBR,EAAApB,MAAIC,GAAA,OACrCyB,EAAA;MACES,KAAK9C;MACLuC,OAAM;MACNQ,cAAchB,EAAApB,MAAIG,GAAA;SAGtBuB,EAAA;MAAKE,OAAM;MAAiCK,MAAK;OAC/CP,EAAA;MACEE,OAAM;MACNS,SAASrC,KAAKsC;OAEblB,EAAApB,MAAIF,GAAA,KAAkByC"}