@genexus/genexus-ide-ui 1.0.39 → 1.0.40

package/dist/genexus-ide-ui/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/genexus-ide-ui/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/genexus-ide-ui/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/genexus-ide-ui/p-a3a43593.entry.js

@@ -0,0 +1,255 @@
+import { r as t, h as e, H as s, g as i } from "./p-49712340.js";
+
+import { g as o } from "./p-b81d21d5.js";
+
+import { L as n } from "./p-311eedf3.js";
+
+const mapCategoryToListItemGroup = t => {
+  const e = {
+    caption: t.name,
+    id: t.name,
+    type: "group",
+    expanded: true,
+    expandable: true,
+    items: t.types.map((t => ({
+      caption: t.name,
+      id: t.name,
+      additionalInformation: {
+        "stretch-start": {
+          center: [ {
+            imgSrc: t.icon
+          } ]
+        }
+      },
+      type: "actionable"
+    })))
+  };
+  return e;
+};
+
+const mapDataTypesToList = t => t.map(((t, e) => ({
+  caption: t.name,
+  id: t.name,
+  additionalInformation: {
+    "stretch-start": {
+      center: [ {
+        imgSrc: t.icon || undefined
+      } ]
+    }
+  },
+  type: "actionable",
+  order: e
+})));
+
+const r = ":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}";
+
+var a = undefined && undefined.__classPrivateFieldGet || function(t, e, s, i) {
+  if (s === "a" && !i) throw new TypeError("Private accessor was defined without a getter");
+  if (typeof e === "function" ? t !== e || !i : !e.has(t)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+  return s === "m" ? i : s === "a" ? i.call(t) : i ? i.value : e.get(t);
+};
+
+var c = undefined && undefined.__classPrivateFieldSet || function(t, e, s, i, o) {
+  if (i === "m") throw new TypeError("Private method is not writable");
+  if (i === "a" && !o) throw new TypeError("Private accessor was defined without a setter");
+  if (typeof e === "function" ? t !== e || !o : !e.has(t)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+  return i === "a" ? o.call(t, s) : o ? o.value = s : e.set(t, s), s;
+};
+
+var h, l, d, f, p, u, m, b;
+
+const g = [ "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 y = "all";
+
+const w = "recenttly-used";
+
+const v = o({
+  category: "system",
+  name: "time",
+  colorType: "primary"
+});
+
+const k = class {
+  constructor(s) {
+    t(this, s);
+    h.set(this, void 0);
+    l.set(this, false);
+    d.set(this, new Map);
+    f.set(this, (t => {
+      var e;
+      const s = (e = t.detail[0]) === null || e === void 0 ? void 0 : e.item.type;
+      if (s === "actionable") {
+        const e = t.detail[0].item.caption;
+        const s = t.detail[0].item.additionalInformation["stretch-start"].center[0];
+        const i = s.imgSrc;
+        this.dataTypeSelectedCallback({
+          name: e,
+          icon: i
+        });
+        a(this, p, "f").call(this, t.detail[0].item.caption, "actionable");
+      } else if (s === "group") {
+        a(this, p, "f").call(this, t.detail[0].item.caption, "group");
+      }
+    }));
+    p.set(this, ((t, e) => {
+      if (this.selectedCategory === w) {
+        this.recentlyUsedActionListModel.forEach((t => {
+          // clear selected
+          t.selected = false;
+        }));
+        const e = this.recentlyUsed.findIndex((e => e.name === t));
+        if (e !== -1) {
+          this.recentlyUsedActionListModel[e].selected = true;
+        }
+      } else if (e === "group" && a(this, d, "f").has(t)) {
+        const e = a(this, d, "f").get(t);
+        const s = Object.assign(Object.assign({}, e), {
+          expanded: e.expanded
+        });
+        a(this, d, "f").set(t, s);
+      }
+    }));
+    u.set(this, (() => {
+      if (!a(this, l, "f")) {
+        const t = [];
+        let e = 1;
+        const s = a(this, d, "f").size;
+        for (const i of a(this, d, "f").keys()) {
+          t.push(a(this, d, "f").get(i));
+          if (e !== s) {
+            t.push({
+              type: "separator"
+            });
+          }
+          e++;
+        }
+        this.categoriesListBoxModel = t;
+        c(this, l, true, "f");
+        this.selectedCategory = y;
+      }
+    }));
+    m.set(this, (() => {
+      c(this, l, false, "f");
+      this.categoriesListBoxModel = this.recentlyUsedActionListModel;
+      this.selectedCategory = w;
+    }));
+    this.selectedCategoryHandler = t => {
+      this.selectedCategory = t.currentTarget.dataset.name;
+      const e = [ a(this, d, "f").get(this.selectedCategory) ];
+      this.categoriesListBoxModel = e;
+      c(this, l, false, "f");
+    };
+    b.set(this, (() => {
+      const t = this.selectedCategory === w ? "button-secondary" : "button-tertiary";
+      const s = this.selectedCategory === y ? "button-secondary" : "button-tertiary";
+      let i = this.selectedCategory;
+      if (this.selectedCategory === w) {
+        i = a(this, h, "f").fixedTypes.recentlyUsed;
+      } else if (this.selectedCategory === y) {
+        i = a(this, h, "f").fixedTypes.all;
+      } else {
+        i = this.selectedCategory;
+      }
+      return e("footer", {
+        class: "footer control-footer control-footer-start spacing-body-inline spacing-body-block scrollable\n      "
+      }, e("div", {
+        class: "buttons-spacer"
+      }, this.recentlyUsed && this.recentlyUsed.length > 0 && e("button", {
+        class: `button-icon-only ${t}`,
+        "aria-label": `${a(this, h, "f").select} ${a(this, h, "f").fixedTypes.recentlyUsed}`,
+        title: `${a(this, h, "f").select} ${a(this, h, "f").fixedTypes.recentlyUsed}`,
+        onClick: a(this, m, "f")
+      }, e("ch-image", {
+        class: "icon-md",
+        src: v
+      })), e("button", {
+        class: `button-icon-only ${s}`,
+        onClick: a(this, u, "f"),
+        "aria-label": `${a(this, h, "f").select} ${a(this, h, "f").fixedTypes.all}`,
+        title: `${a(this, h, "f").select} ${a(this, h, "f").fixedTypes.all}`
+      }, "[*]"), this.categories.map((t => {
+        const s = t.name === this.selectedCategory ? "button-secondary" : "button-tertiary";
+        return e("button", {
+          class: `button-icon-only ${s}`,
+          "aria-label": t.name,
+          title: t.name,
+          onClick: this.selectedCategoryHandler,
+          "data-name": t.name
+        }, e("ch-image", {
+          class: "icon-md",
+          src: t.icon
+        }));
+      }))), e("p", {
+        class: "text-body-regular-s selected-category"
+      }, i));
+    }));
+    this.categoriesListBoxModel = [];
+    this.selectedCategory = undefined;
+    this.statusInfo = [];
+    this.recentlyUsedActionListModel = [];
+    this.loading = true;
+    this.categories = undefined;
+    this.dataTypeSelectedCallback = undefined;
+    this.recentlyUsed = [];
+  }
+  categoriesChanged(t) {
+    if (!(t === null || t === void 0 ? void 0 : t.length)) {
+      return;
+    }
+    a(this, d, "f").clear();
+    t.forEach((t => {
+      const e = mapCategoryToListItemGroup(t);
+      a(this, d, "f").set(t.name, e);
+    }));
+    this.loading = false;
+    a(this, u, "f").call(this);
+  }
+  recentlyUsedChanged(t) {
+    this.recentlyUsedActionListModel = null;
+    this.recentlyUsedActionListModel = mapDataTypesToList(t);
+  }
+  async componentWillLoad() {
+    c(this, h, await n.getComponentStrings(this.el), "f");
+    // initialize models
+        this.recentlyUsed.length && this.recentlyUsedChanged(this.recentlyUsed);
+  }
+  render() {
+    return e(s, {
+      class: "widget"
+    }, e("ch-theme", {
+      model: g
+    }), this.loading ? e("gx-ide-loader", {
+      loaderTitle: a(this, h, "f").loader.title,
+      description: a(this, h, "f").loader.description,
+      show: true
+    }) : e("section", {
+      class: "main"
+    }, e("ch-action-list-render", {
+      class: "list-box",
+      model: this.categoriesListBoxModel,
+      selection: "single",
+      onSelectedItemsChange: a(this, f, "f")
+    }), a(this, b, "f").call(this)));
+  }
+  static get assetsDirs() {
+    return [ "gx-ide-assets/data-type-selector" ];
+  }
+  get el() {
+    return i(this);
+  }
+  static get watchers() {
+    return {
+      categories: [ "categoriesChanged" ],
+      recentlyUsed: [ "recentlyUsedChanged" ]
+    };
+  }
+};
+
+h = new WeakMap, l = new WeakMap, d = new WeakMap, f = new WeakMap, p = new WeakMap, 
+u = new WeakMap, m = new WeakMap, b = new WeakMap;
+
+k.style = r;
+
+export { k as gx_ide_data_type_selector };
+//# sourceMappingURL=p-a3a43593.entry.js.map

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":";;;;;;;;;;;;;;;;GAWO,OAAMA,sBAAuBC;EAClC,WAAWA,MAAS,YAAYA,EAAKC,WAAW,IAAI;IAClD,OAAO;;EAGT,MAAMC,IAAWF,EAAKG,MAAM,KAAKC,OAAOC;;IACxC,IAAIH,EAASI,WAAW,GAAG;IACzB,OAAOJ,EAAS,GAAG,GAAGK;SACjB;IACL,OAAO,GAAGL,EAAS,GAAG,GAAGK,gBAAgBL,EAAS,GAAG,GAAGK;;;;;;;;;;;;;;GAerD,OAAMC,gBAAiBC;EAC5B,WAAWA,MAAa,YAAYA,EAASR,WAAW,IAAI;IAC1D,OAAO;;EAGT,MAAMS,IAAeD,EAASN,MAAM,KAAKC,OAAOC;;IAChD,IAAIK,EAAaJ,WAAW,GAAG;IAC7B,OAAOI,EAAa;SACf;IACL,OAAO,GAAGA,EAAa,MAAMA,EAAa;;;;AC5C9C,MAAMC,IAAqB;;;;;;;;;;;;;;;;;ACS3B,MAAMC,IAA8B;;AAElC,qBACA,sBACA,qBACA,mBACA,uBACA,gBACA,oBACA,iBACA;;AAGF,MAAMC,IAAoBC,EAAY;EACpCC,UAAU;EACVf,MAAM;EACNgB,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,GAAa1B,oBAAoByB,KAAKiB,SAASzC,OAAK;IACxDqC,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,MAAMC,IAAW1C,eAAc2C,IAAA3B,KAAKiB,cAAQ,QAAAU,WAAA,aAAAA,EAAEnD;IAC9C,OACEoD,EAACC,GAAI;MAACC,OAAM;OACVF,EAAA;MAAUG,OAAO3C;QACjBwC,EAAA;MACEE,OAAM;MACNC,OAAOX,EAAApB,MAAIE,GAAA;MACX8B,UAAS;MACTC,mBAAmBb,EAAApB,MAAII,GAAA;OAEvBwB,EAAA;MACEE,OAAM;MACNI,KAAKlB,KAAOH,EAAAb,MAAIG,GAAoBa,GAAuB;MAC3DmB,MAAK;OAELP,EAAA;MAAKE,OAAM;OACRJ,IACCE,EAAA;MAAME,OAAM;OAAoBJ,KAC9B,QACHU,IAAApC,KAAKiB,cAAQ,QAAAmB,WAAA,aAAAA,EAAEC,QACdT,EAAA;MAAME,OAAM;OACT9B,KAAKiB,SAASoB,QAEf,OAGNT,EAAA;MAAKE,OAAM;OAAsBV,EAAApB,MAAIC,GAAA,OACrC2B,EAAA;MACEU,KAAKjD;MACLyC,OAAM;MACNS,cAAcnB,EAAApB,MAAIG,GAAA;SAGtByB,EAAA;MAAKE,OAAM;MAAiCK,MAAK;OAC/CP,EAAA;MACEE,OAAM;MACNU,SAASxC,KAAKyC;OAEbrB,EAAApB,MAAIF,GAAA,KAAkB4C"}

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;