@genexus/genexus-ide-ui 1.0.45 → 1.0.46

package/dist/genexus-ide-ui/{p-b12a5426.entry.js → p-a27c088d.entry.js}

@@ -1,8 +1,8 @@
-import { r as e, h as t, H as i, g as n } from "./p-49712340.js";
+import { r as e, h as t, H as n, g as i } from "./p-49712340.js";
 
 import { g as o } from "./p-617e65ca.js";
 
-import { L as r } from "./p-311eedf3.js";
+import { L as s } from "./p-311eedf3.js";
 
 /**
  * Returns initials from the first two words of a name. Returns "X" for invalid input.
@@ -50,28 +50,28 @@ import { L as r } from "./p-311eedf3.js";
   }
 };
 
-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}";
+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__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)}.user-login__footer{display:flex;flex-direction:column;gap:var(--mer-spacing--2xs)}.agreement-link{text-decoration:underline;cursor:pointer}";
 
-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");
+var a = undefined && undefined.__classPrivateFieldSet || function(e, t, n, 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 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;
+  return i === "a" ? o.call(e, n) : o ? o.value = n : t.set(e, n), n;
 };
 
-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 = undefined && undefined.__classPrivateFieldGet || function(e, t, n, i) {
+  if (n === "a" && !i) throw new TypeError("Private accessor was defined without a getter");
+  if (typeof t === "function" ? e !== t || !i : !t.has(e)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+  return n === "m" ? i : n === "a" ? i.call(e) : i ? i.value : t.get(e);
 };
 
-var c, d, f, u, p;
+var c, d, f, u, m;
 
-const h = [ 
+const p = [ 
 // TODO: review if "utils/form--full" is required.
 "resets/box-sizing", "components/tooltip", "components/switch", "components/icon", "components/dropdown", "utils/layout", "utils/typography", "utils/spacing", "chameleon/scrollbar" ];
 
-const m = o({
+const h = o({
   category: "navigation",
   name: "chevron-down",
   colorType: "neutral"
@@ -99,14 +99,12 @@ const y = class {
     //     this.changeModeCallback(this.#mode);
     //   }
     // };
-        p.set(this, ((e, t, i) => {
-      if (i === g) {
-        this.myAccountCallback();
-      } else if (i === _) {
+        m.set(this, ((e, t, n) => {
+      if (n === g) ; else if (n === _) {
         this.changeTeamCallback();
-      } else if (i === v) {
+      } else if (n === v) {
         this.signOutCallback();
-      } else if (i === w) {
+      } else if (n === w) {
         this.changeLanguageCallback();
       }
     }));
@@ -117,16 +115,19 @@ const y = class {
     this.changeLanguageCallback = undefined;
     this.changeModeCallback = undefined;
     this.signOutCallback = undefined;
-    this.showTermsCallback = undefined;
+    this.termsCallback = undefined;
+    this.privacyCallback = undefined;
   }
   async componentWillLoad() {
-    a(this, c, await r.getComponentStrings(this.el), "f");
+    a(this, c, await s.getComponentStrings(this.el), "f");
     a(this, d, getInitialsFromName(this.userInfo.name), "f");
-    a(this, f, [ {
-      id: g,
-      caption: l(this, c, "f").myAccountLabel,
-      showSeparator: false
-    }, {
+    a(this, f, [ 
+    // {
+    //   id: MY_ACCOUNT_ID,
+    //   caption: this.#componentLocale.myAccountLabel,
+    //   showSeparator: false
+    // },
+    {
       id: _,
       caption: l(this, c, "f").changeTeamLabel,
       showSeparator: false
@@ -137,17 +138,17 @@ const y = class {
     } ], "f");
   }
   render() {
-    var e, n;
+    var e, i;
     const o = limitFullName((e = this.userInfo) === null || e === void 0 ? void 0 : e.name);
-    return t(i, {
+    return t(n, {
       class: "widget"
     }, t("ch-theme", {
-      model: h
+      model: p
     }), t("ch-dropdown-render", {
       class: "dropdown",
       model: l(this, f, "f"),
       position: "InsideEnd_OutsideEnd",
-      itemClickCallback: l(this, p, "f")
+      itemClickCallback: l(this, m, "f")
     }, t("button", {
       class: "user-login__button",
       ref: e => a(this, u, e, "f"),
@@ -156,33 +157,36 @@ const y = class {
       class: "user-login__details"
     }, o ? t("span", {
       class: "user-login__name"
-    }, o) : null, ((n = this.userInfo) === null || n === void 0 ? void 0 : n.team) ? t("span", {
+    }, o) : null, ((i = this.userInfo) === null || i === void 0 ? void 0 : i.team) ? t("span", {
       class: "user-login__organization"
     }, this.userInfo.team) : null), t("div", {
       class: "user-login__avatar"
     }, l(this, d, "f")), t("ch-image", {
-      src: m,
+      src: h,
       class: "icon-md",
       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
-    }, l(this, c, "f").privacyAndTerms))));
+    }, t("span", {
+      class: "text-body-regular-s agreement-link",
+      onClick: this.termsCallback
+    }, l(this, c, "f").termsAndConditionsText), t("span", {
+      class: "text-body-regular-s agreement-link",
+      onClick: this.privacyCallback
+    }, l(this, c, "f").privacyPolicyText))));
   }
   static get assetsDirs() {
     return [ "gx-ide-assets/current-user-info" ];
   }
   get el() {
-    return n(this);
+    return i(this);
   }
 };
 
-c = new WeakMap, d = new WeakMap, f = new WeakMap, u = new WeakMap, p = new WeakMap;
+c = new WeakMap, d = new WeakMap, f = new WeakMap, u = new WeakMap, m = new WeakMap;
 
-y.style = s;
+y.style = r;
 
 export { y as gx_ide_current_user_info };
-//# sourceMappingURL=p-b12a5426.entry.js.map
+//# sourceMappingURL=p-a27c088d.entry.js.map

package/dist/genexus-ide-ui/p-a27c088d.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","changeTeamCallback","signOutCallback","changeLanguageCallback","componentWillLoad","__classPrivateFieldSet","Locale","getComponentStrings","el","userInfo","id","caption","__classPrivateFieldGet","changeTeamLabel","showSeparator","signOutLabel","render","userName","_a","h","Host","class","model","position","itemClickCallback","ref","slot","_b","team","src","containerRef","onClick","termsCallback","termsAndConditionsText","privacyCallback","privacyPolicyText"],"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  &__footer {\n    display: flex;\n    flex-direction: column;\n    gap: var(--mer-spacing--2xs);\n  }\n}\n\n.agreement-link {\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/switch\",\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 clicks on the \"term and conditions\" link\n   */\n  @Prop() readonly termsCallback: () => Promise<void>;\n\n  /**\n   * Callback executed when the user clicks on the \"privacy policy\" link\n   */\n  @Prop() readonly privacyCallback: () => 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            <span\n              class=\"text-body-regular-s agreement-link\"\n              onClick={this.termsCallback}\n            >\n              {this.#componentLocale.termsAndConditionsText}\n            </span>\n            <span\n              class=\"text-body-regular-s agreement-link\"\n              onClick={this.privacyCallback}\n            >\n              {this.#componentLocale.privacyPolicyText}\n            </span>\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;;;;;;;QA8EAI,EAAAL,IAAAC,OAA4B,CAC1BK,GACAC,GACAC;MAEA,IAAIA,MAAWd,UAER,IAAIc,MAAWb,GAAgB;QACpCM,KAAKQ;aACA,IAAID,MAAWZ,GAAa;QACjCK,KAAKS;aACA,IAAIF,MAAWX,GAAa;QACjCI,KAAKU;;;oBAxFoB;;;;;;;;;;EA0C7B,uBAAMC;IACJC,EAAAZ,MAAIF,SAA0Be,EAAOC,oBAAoBd,KAAKe,KAAG;IACjEH,EAAAZ,MAAIC,GAAa1B,oBAAoByB,KAAKgB,SAASxC,OAAK;IACxDoC,EAAAZ,MAAIE,GAAsB;;;;;;IAMxB;MACEe,IAAIvB;MACJwB,SAASC,EAAAnB,MAAIF,GAAA,KAAkBsB;MAC/BC,eAAe;OAEjB;MACEJ,IAAItB;MACJuB,SAASC,EAAAnB,MAAIF,GAAA,KAAkBwB;MAC/BD,eAAe;SAOlB;;EA0BH,MAAAE;;IACE,MAAMC,IAAWxC,eAAcyC,IAAAzB,KAAKgB,cAAQ,QAAAS,WAAA,aAAAA,EAAEjD;IAC9C,OACEkD,EAACC,GAAI;MAACC,OAAM;OACVF,EAAA;MAAUG,OAAOzC;QACjBsC,EAAA;MACEE,OAAM;MACNC,OAAOV,EAAAnB,MAAIE,GAAA;MACX4B,UAAS;MACTC,mBAAmBZ,EAAAnB,MAAII,GAAA;OAEvBsB,EAAA;MACEE,OAAM;MACNI,KAAKjB,KAAOH,EAAAZ,MAAIG,GAAoBY,GAAuB;MAC3DkB,MAAK;OAELP,EAAA;MAAKE,OAAM;OACRJ,IACCE,EAAA;MAAME,OAAM;OAAoBJ,KAC9B,QACHU,IAAAlC,KAAKgB,cAAQ,QAAAkB,WAAA,aAAAA,EAAEC,QACdT,EAAA;MAAME,OAAM;OACT5B,KAAKgB,SAASmB,QAEf,OAGNT,EAAA;MAAKE,OAAM;OAAsBT,EAAAnB,MAAIC,GAAA,OACrCyB,EAAA;MACEU,KAAK/C;MACLuC,OAAM;MACNS,cAAclB,EAAAnB,MAAIG,GAAA;SAGtBuB,EAAA;MAAKE,OAAM;MAAiCK,MAAK;OAC/CP,EAAA;MACEE,OAAM;MACNU,SAAStC,KAAKuC;OAEbpB,EAAAnB,MAAIF,GAAA,KAAkB0C,yBAEzBd,EAAA;MACEE,OAAM;MACNU,SAAStC,KAAKyC;OAEbtB,EAAAnB,MAAIF,GAAA,KAAkB4C"}

package/dist/genexus-ide-ui/{p-c9b0fd13.entry.js → p-ab653cc2.entry.js}

@@ -2,12 +2,12 @@ import { a as e, r as n, h as i, H as t, g as s } from "./p-49712340.js";
 
 import { L as a } from "./p-311eedf3.js";
 
-const mapTeamsToComboBoxItemModel = e => e.map((e => ({
+const mapTeamsToComboBoxItemModel = e => e === null || e === void 0 ? void 0 : e.map((e => ({
   value: e.id,
   caption: e.name
 })));
 
-const r = ":host {\n  display: grid;\n  container-type: inline-size;\n  container-name: host-container;\n  block-size: 100%;\n  inline-size: 100%;\n  align-items: center;\n  justify-content: center;\n  padding: var(--mer-spacing--xl);\n}\n\n.slide {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  block-size: 100%;\n  max-block-size: 700px;\n  max-inline-size: 1100px;\n  background-color: var(--mer-surface__elevation--01);\n  border-radius: var(--mer-spacing--md);\n  overflow: hidden;\n}\n.slide__illustration {\n  overflow: hidden;\n  object-fit: cover;\n  object-position: left;\n  block-size: 100%;\n  inline-size: 100%;\n}\n.slide__main {\n  display: grid;\n  block-size: 100%;\n  inline-size: 100%;\n  padding: var(--mer-spacing--3xl);\n}\n.slide__main-container {\n  display: grid;\n  place-self: center;\n  gap: var(--mer-spacing--lg);\n  max-inline-size: 480px;\n}\n.slide__main-header {\n  display: grid;\n  gap: var(--mer-spacing--lg);\n}\n.slide__main-title {\n  display: flex;\n  flex-direction: column;\n  font-size: var(--mer-font__size--xl);\n  font-weight: var(--mer-font__weight--semi-bold);\n  letter-spacing: 0.02em;\n  color: var(--mer-text__on-surface);\n}\n.slide__main-description {\n  display: grid;\n  gap: var(--mer-spacing--2xl);\n  font-size: var(--mer-font__size--sm);\n  font-weight: var(--mer-font__weight--light);\n  line-height: var(--mer-line-height--spaced);\n  color: var(--mer-text__complementary);\n}\n\n.terms-conditions {\n  text-decoration: underline;\n}\n\n.teams-list {\n  inline-size: 100%;\n  max-inline-size: 400px;\n}\n\n.buttons-container {\n  display: flex;\n  gap: var(--mer-spacing--md);\n}\n\n.continue-btn,\n.cancel-btn {\n  flex: 1;\n}\n\n@container host-container (max-width: 768px) {\n  .slide {\n    grid-template-columns: 1fr 2fr;\n  }\n}\n@container host-container (max-width: 640px) {\n  .slide {\n    grid-template-columns: 1fr 5fr;\n  }\n}";
+const r = ":host {\n  display: grid;\n  container-type: inline-size;\n  container-name: host-container;\n  block-size: 100%;\n  inline-size: 100%;\n  align-items: center;\n  justify-content: center;\n  padding: var(--mer-spacing--xl);\n}\n\n.slide {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  block-size: 100%;\n  max-block-size: 700px;\n  max-inline-size: 1100px;\n  background-color: var(--mer-surface__elevation--01);\n  border-radius: var(--mer-spacing--md);\n  overflow: hidden;\n}\n.slide__illustration {\n  overflow: hidden;\n  object-fit: cover;\n  object-position: left;\n  block-size: 100%;\n  inline-size: 100%;\n}\n.slide__main {\n  display: grid;\n  block-size: 100%;\n  inline-size: 100%;\n  padding: var(--mer-spacing--3xl);\n  transform: translateY(var(--mer-spacing--2xs));\n  transition: var(--display-teams-transtion-time) all;\n  opacity: 0;\n  position: relative;\n}\n.slide__main--visible {\n  transform: translateY(0);\n  opacity: 1;\n}\n.slide__main-container {\n  display: grid;\n  place-self: center;\n  gap: var(--mer-spacing--lg);\n  max-inline-size: 480px;\n}\n.slide__main-header {\n  display: grid;\n  gap: var(--mer-spacing--lg);\n}\n.slide__main-title {\n  display: flex;\n  flex-direction: column;\n  font-size: var(--mer-font__size--xl);\n  font-weight: var(--mer-font__weight--semi-bold);\n  letter-spacing: 0.02em;\n  color: var(--mer-text__on-surface);\n}\n.slide__main-description {\n  display: grid;\n  gap: var(--mer-spacing--2xl);\n  font-size: var(--mer-font__size--sm);\n  font-weight: var(--mer-font__weight--light);\n  line-height: var(--mer-line-height--spaced);\n  color: var(--mer-text__complementary);\n}\n\n.terms-conditions {\n  text-decoration: underline;\n}\n\n.teams-list {\n  inline-size: 100%;\n  max-inline-size: 400px;\n}\n\n.buttons-container {\n  display: flex;\n  gap: var(--mer-spacing--md);\n}\n\n.continue-btn,\n.cancel-btn {\n  flex: 1;\n}\n\n@container host-container (max-width: 768px) {\n  .slide {\n    grid-template-columns: 1fr 2fr;\n  }\n}\n@container host-container (max-width: 640px) {\n  .slide {\n    grid-template-columns: 1fr 5fr;\n  }\n}";
 
 var o = undefined && undefined.__classPrivateFieldGet || function(e, n, i, t) {
   if (i === "a" && !t) throw new TypeError("Private accessor was defined without a getter");
@@ -22,13 +22,13 @@ var l = undefined && undefined.__classPrivateFieldSet || function(e, n, i, t, s)
   return t === "a" ? s.call(e, i) : s ? s.value = i : n.set(e, i), i;
 };
 
-var c, d, m, h, p;
+var c, d, m, h, f, p;
 
-const f = e(`./gx-ide-assets/welcome-page/images/copyrights-illustration.png`);
+const g = e(`./gx-ide-assets/welcome-page/images/copyrights-illustration.png`);
 
-const g = e(`./gx-ide-assets/welcome-page/images/icon-next.svg`);
+const u = e(`./gx-ide-assets/welcome-page/images/icon-next.svg`);
 
-const u = [ "resets/box-sizing", "utils/typography", "components/button", "components/combo-box" ];
+const v = [ "resets/box-sizing", "utils/typography", "components/button", "components/combo-box" ];
 
 const _ = class {
   constructor(e) {
@@ -41,43 +41,64 @@ const _ = class {
     // Select User Team References :
         d.set(this, []);
     m.set(this, void 0);
-    h.set(this, (async () => {
+    h.set(this, 100);
+    f.set(this, (async () => {
       await this.continueCallback(o(this, m, "f").value);
     }));
     p.set(this, (async () => {
       await this.cancelCallback();
     }));
+    this.slideIsVisible = false;
+    this.teamsModelReady = false;
     this.cancelCallback = undefined;
     this.continueCallback = undefined;
     this.teams = undefined;
   }
   teamsChanged(e) {
-    l(this, d, mapTeamsToComboBoxItemModel(e), "f");
+    this.slideIsVisible = false;
+    // switch step
+        setTimeout((() => {
+      if (e.length) {
+        l(this, d, mapTeamsToComboBoxItemModel(e), "f");
+        this.teamsModelReady = true;
+      } else {
+        this.teamsModelReady = false;
+      }
+    }), o(this, h, "f"));
+    // show slide
+        setTimeout((() => {
+      this.slideIsVisible = true;
+    }), o(this, h, "f") * 2);
   }
   async componentWillLoad() {
     l(this, c, await a.getComponentStrings(this.el), "f");
     this.teamsChanged(this.teams);
+    this.el.style.setProperty("--display-teams-transtion-time", o(this, h, "f").toString() + "ms");
+  }
+  componentDidLoad() {
+    this.slideIsVisible = true;
   }
   render() {
     var e;
     return i(t, null, i("ch-theme", {
-      model: u
+      model: v
     }), i("section", {
       class: "slide"
     }, i("img", {
-      src: f,
+      src: g,
       class: "slide__illustration",
       alt: ""
     }), i("div", {
       class: {
-        slide__main: true
+        slide__main: true,
+        "slide__main--visible": this.slideIsVisible
       }
     }, i("div", {
       class: "slide__main-container"
-    }, i("header", {
+    }, this.teamsModelReady ? [ i("header", {
       class: "slide__main-header"
     }, i("img", {
-      src: g,
+      src: u,
       alt: ""
     }), i("h2", {
       // Split the title into two spans for better styling
@@ -97,17 +118,21 @@ const _ = class {
       accessibleName: "Teams",
       class: "combo-box teams-list",
       model: o(this, d, "f"),
-      value: (e = o(this, d, "f")[0]) === null || e === void 0 ? void 0 : e.value,
+      value: o(this, d, "f") && ((e = o(this, d, "f")[0]) === null || e === void 0 ? void 0 : e.value),
       ref: e => l(this, m, e, "f")
     }))), i("div", {
       class: "buttons-container"
     }, i("button", {
       class: "button-primary continue-btn",
-      onClick: o(this, h, "f")
+      onClick: o(this, f, "f")
     }, o(this, c, "f").continueButtonCaption), i("button", {
       class: "button-secondary cancel-btn",
       onClick: o(this, p, "f")
-    }, o(this, c, "f").cancelButtonCaption))))));
+    }, o(this, c, "f").cancelButtonCaption)) ] : i("gx-ide-loader", {
+      show: true,
+      loaderTitle: o(this, c, "f").loader.title,
+      description: o(this, c, "f").loader.description
+    })))));
   }
   static get assetsDirs() {
     return [ "gx-ide-assets/select-user-team" ];
@@ -122,9 +147,10 @@ const _ = class {
   }
 };
 
-c = new WeakMap, d = new WeakMap, m = new WeakMap, h = new WeakMap, p = new WeakMap;
+c = new WeakMap, d = new WeakMap, m = new WeakMap, h = new WeakMap, f = new WeakMap, 
+p = new WeakMap;
 
 _.style = r;
 
 export { _ as gx_ide_select_user_team };
-//# sourceMappingURL=p-c9b0fd13.entry.js.map
+//# sourceMappingURL=p-ab653cc2.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["mapTeamsToComboBoxItemModel","teams","map","team","value","id","caption","name","selectUserTeamCss","COPYRIGHTS_ILLUSTRATION","getAssetPath","ICON_NEXT","CSS_BUNDLES","GxIdeSelectUserTeam","_GxIdeSelectUserTeam_componentLocale","set","this","_GxIdeSelectUserTeam_userTeamsModel","_GxIdeSelectUserTeam_chSelectTeamEl","_GxIdeSelectUserTeam_displayTeamsTransitionTime","_GxIdeSelectUserTeam_continueHandler","async","continueCallback","__classPrivateFieldGet","_GxIdeSelectUserTeam_cancelHandler","cancelCallback","teamsChanged","newTeams","slideIsVisible","setTimeout","length","__classPrivateFieldSet","teamsModelReady","componentWillLoad","Locale","getComponentStrings","el","style","setProperty","toString","componentDidLoad","render","h","Host","model","class","src","alt","slide__main","title","infoMessage","htmlFor","accessibleName","_a","ref","onClick","continueButtonCaption","cancelButtonCaption","show","loaderTitle","loader","description"],"sources":["src/components/select-user-team/helpers.tsx","src/components/select-user-team/select-user-team.scss?tag=gx-ide-select-user-team&encapsulation=shadow","src/components/select-user-team/select-user-team.tsx"],"sourcesContent":["import { ComboBoxItemModel } from \"@genexus/chameleon-controls-library/dist/types/components/combo-box/types\";\nimport { TeamData } from \"./select-user-team\";\n\nexport const mapTeamsToComboBoxItemModel = (\n  teams: TeamData[]\n): ComboBoxItemModel[] => {\n  return teams?.map(team => {\n    return {\n      value: team.id,\n      caption: team.name\n    };\n  });\n};\n",":host {\n  display: grid;\n  container-type: inline-size;\n  container-name: host-container;\n  block-size: 100%;\n  inline-size: 100%;\n  align-items: center;\n  justify-content: center;\n  padding: var(--mer-spacing--xl);\n}\n\n.slide {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  block-size: 100%;\n  max-block-size: 700px;\n  max-inline-size: 1100px;\n  background-color: var(--mer-surface__elevation--01);\n  border-radius: var(--mer-spacing--md);\n  overflow: hidden;\n\n  &__illustration {\n    overflow: hidden;\n    object-fit: cover;\n    object-position: left;\n    block-size: 100%;\n    inline-size: 100%;\n  }\n\n  &__main {\n    display: grid;\n    block-size: 100%;\n    inline-size: 100%;\n    padding: var(--mer-spacing--3xl);\n    transform: translateY(var(--mer-spacing--2xs));\n    transition: var(--display-teams-transtion-time) all;\n    opacity: 0;\n\n    position: relative;\n\n    &--visible {\n      transform: translateY(0);\n      opacity: 1;\n    }\n  }\n\n  &__main-container {\n    display: grid;\n    place-self: center;\n    gap: var(--mer-spacing--lg);\n    max-inline-size: 480px;\n  }\n\n  &__main-header {\n    display: grid;\n    gap: var(--mer-spacing--lg);\n  }\n\n  &__main-title {\n    display: flex;\n    flex-direction: column;\n    font-size: var(--mer-font__size--xl);\n    font-weight: var(--mer-font__weight--semi-bold);\n    letter-spacing: 0.02em;\n    color: var(--mer-text__on-surface);\n  }\n\n  &__main-description {\n    display: grid;\n    gap: var(--mer-spacing--2xl);\n    font-size: var(--mer-font__size--sm);\n    font-weight: var(--mer-font__weight--light);\n    line-height: var(--mer-line-height--spaced);\n    color: var(--mer-text__complementary);\n  }\n}\n\n.terms-conditions {\n  text-decoration: underline;\n}\n\n.teams-list {\n  inline-size: 100%;\n  max-inline-size: 400px;\n}\n\n.buttons-container {\n  display: flex;\n  gap: var(--mer-spacing--md);\n}\n\n.continue-btn,\n.cancel-btn {\n  flex: 1;\n}\n\n@container host-container (max-width: 768px) {\n  .slide {\n    grid-template-columns: 1fr 2fr;\n  }\n}\n\n@container host-container (max-width: 640px) {\n  .slide {\n    grid-template-columns: 1fr 5fr;\n  }\n}\n","// Stencil\nimport {\n  Component,\n  Host,\n  h,\n  Prop,\n  State,\n  Watch,\n  Element,\n  getAssetPath\n} from \"@stencil/core\";\n// Other Libraries\nimport { MercuryBundles } from \"@genexus/mercury\";\nimport { ComboBoxItemModel } from \"@genexus/chameleon-controls-library/dist/types/components/combo-box/types\";\n// Custom Imports\nimport { Locale } from \"../../common/locale\";\nimport { mapTeamsToComboBoxItemModel } from \"./helpers\";\n\nconst COPYRIGHTS_ILLUSTRATION = getAssetPath(\n  `./gx-ide-assets/welcome-page/images/copyrights-illustration.png`\n);\nconst ICON_NEXT = getAssetPath(\n  `./gx-ide-assets/welcome-page/images/icon-next.svg`\n);\nconst CSS_BUNDLES: MercuryBundles = [\n  \"resets/box-sizing\",\n  \"utils/typography\",\n  \"components/button\",\n  \"components/combo-box\"\n];\n\n@Component({\n  tag: \"gx-ide-select-user-team\",\n  styleUrl: \"select-user-team.scss\",\n  shadow: true,\n  assetsDirs: [\"gx-ide-assets/select-user-team\"]\n})\nexport class GxIdeSelectUserTeam {\n  /**\n   * The component hard-coded strings translations.\n   */\n  // eslint-disable-next-line @stencil-community/own-props-must-be-private\n  #componentLocale: any;\n  // Select User Team References :\n  #userTeamsModel: ComboBoxItemModel[] = [];\n  #chSelectTeamEl: HTMLChComboBoxRenderElement;\n  #displayTeamsTransitionTime: number = 100;\n\n  @Element() el: HTMLGxIdeSelectUserTeamElement;\n\n  /**\n   * Defines if the main slide is visible or not. Used for smooth transitions between slides.\n   */\n  @State() slideIsVisible: boolean = false;\n\n  /**\n   * Defines if the team model is redy to be rendered.\n   */\n  @State() teamsModelReady: boolean = false;\n\n  /**\n   * Callback executed when the user clicks the 'Cancel' button\n   */\n  @Prop() readonly cancelCallback!: () => Promise<void>;\n\n  /**\n   * Callback executed when the user clicks the 'Continue' button\n   */\n  @Prop() readonly continueCallback!: (teamId: string) => Promise<void>;\n\n  /**\n   * Array that contains the user's teams\n   */\n  @Prop() readonly teams!: TeamData[];\n  @Watch(\"teams\")\n  teamsChanged(newTeams: TeamData[]) {\n    this.slideIsVisible = false;\n    // switch step\n    setTimeout(() => {\n      if (newTeams.length) {\n        this.#userTeamsModel = mapTeamsToComboBoxItemModel(newTeams);\n        this.teamsModelReady = true;\n      } else {\n        this.teamsModelReady = false;\n      }\n    }, this.#displayTeamsTransitionTime);\n    // show slide\n    setTimeout(() => {\n      this.slideIsVisible = true;\n    }, this.#displayTeamsTransitionTime * 2);\n  }\n\n  async componentWillLoad() {\n    this.#componentLocale = await Locale.getComponentStrings(this.el);\n    this.teamsChanged(this.teams);\n\n    this.el.style.setProperty(\n      \"--display-teams-transtion-time\",\n      this.#displayTeamsTransitionTime.toString() + \"ms\"\n    );\n  }\n\n  componentDidLoad() {\n    this.slideIsVisible = true;\n  }\n\n  #continueHandler = async () => {\n    await this.continueCallback(this.#chSelectTeamEl.value);\n  };\n\n  #cancelHandler = async () => {\n    await this.cancelCallback();\n  };\n\n  render() {\n    return (\n      <Host>\n        <ch-theme model={CSS_BUNDLES}></ch-theme>\n        <section class=\"slide\">\n          <img\n            src={COPYRIGHTS_ILLUSTRATION}\n            class=\"slide__illustration\"\n            alt=\"\" // decorative\n          />\n\n          <div\n            class={{\n              \"slide__main\": true,\n              \"slide__main--visible\": this.slideIsVisible\n            }}\n          >\n            <div class=\"slide__main-container\">\n              {this.teamsModelReady ? (\n                [\n                  <header class=\"slide__main-header\">\n                    <img\n                      src={ICON_NEXT}\n                      alt=\"\" // decorative\n                    />\n                    <h2\n                      // Split the title into two spans for better styling\n                      class=\"slide__main-title\"\n                    >\n                      <span>{this.#componentLocale.title}</span>\n                    </h2>\n                  </header>,\n                  <div class=\"slide__select-team-description\">\n                    <p class=\"text-body-highlighted-l\">\n                      {this.#componentLocale.infoMessage}\n                    </p>\n                  </div>,\n                  <div class=\"field-group\">\n                    <div class=\"field field-block\">\n                      <label htmlFor=\"teams\">\n                        {this.#componentLocale.teams}\n                      </label>\n                      <ch-combo-box-render\n                        id=\"teams\"\n                        accessibleName=\"Teams\"\n                        class=\"combo-box teams-list\"\n                        model={this.#userTeamsModel}\n                        value={\n                          this.#userTeamsModel && this.#userTeamsModel[0]?.value\n                        }\n                        ref={(el: HTMLChComboBoxRenderElement) =>\n                          (this.#chSelectTeamEl =\n                            el as HTMLChComboBoxRenderElement)\n                        }\n                      ></ch-combo-box-render>\n                    </div>\n                  </div>,\n                  <div class=\"buttons-container\">\n                    <button\n                      class=\"button-primary continue-btn\"\n                      onClick={this.#continueHandler}\n                    >\n                      {this.#componentLocale.continueButtonCaption}\n                    </button>\n                    <button\n                      class=\"button-secondary cancel-btn\"\n                      onClick={this.#cancelHandler}\n                    >\n                      {this.#componentLocale.cancelButtonCaption}\n                    </button>\n                  </div>\n                ]\n              ) : (\n                <gx-ide-loader\n                  show\n                  loaderTitle={this.#componentLocale.loader.title}\n                  description={this.#componentLocale.loader.description}\n                ></gx-ide-loader>\n              )}\n            </div>\n          </div>\n        </section>\n      </Host>\n    );\n  }\n}\n\nexport type TeamData = {\n  id: string;\n  name: string;\n};\n"],"mappings":";;;;AAGO,MAAMA,8BACXC,KAEOA,MAAK,QAALA,WAAK,aAALA,EAAOC,KAAIC,MACT;EACLC,OAAOD,EAAKE;EACZC,SAASH,EAAKI;;;ACTpB,MAAMC,IAAoB;;;;;;;;;;;;;;;;;ACkB1B,MAAMC,IAA0BC,EAC9B;;AAEF,MAAMC,IAAYD,EAChB;;AAEF,MAAME,IAA8B,EAClC,qBACA,oBACA,qBACA;;MASWC,IAAmB;;;;;;;QAK9BC,EAAAC,IAAAC,WAAA;;QAEAC,EAAAF,IAAAC,MAAuC;IACvCE,EAAAH,IAAAC,WAAA;IACAG,EAAAJ,IAAAC,MAAsC;IA4DtCI,EAAAL,IAAAC,OAAmBK;YACXL,KAAKM,iBAAiBC,EAAAP,MAAIE,GAAA,KAAiBd;AAAM;IAGzDoB,EAAAT,IAAAC,OAAiBK;YACTL,KAAKS;AAAgB;0BA1DM;2BAKC;;;;;EAiBpC,YAAAC,CAAaC;IACXX,KAAKY,iBAAiB;;QAEtBC,YAAW;MACT,IAAIF,EAASG,QAAQ;QACnBC,EAAAf,MAAIC,GAAmBjB,4BAA4B2B,IAAS;QAC5DX,KAAKgB,kBAAkB;aAClB;QACLhB,KAAKgB,kBAAkB;;QAExBT,EAAAP,MAAIG,GAAA;;QAEPU,YAAW;MACTb,KAAKY,iBAAiB;AAAI,QACzBL,EAAAP,MAAIG,GAAA,OAA+B;;EAGxC,uBAAMc;IACJF,EAAAf,MAAIF,SAA0BoB,EAAOC,oBAAoBnB,KAAKoB,KAAG;IACjEpB,KAAKU,aAAaV,KAAKf;IAEvBe,KAAKoB,GAAGC,MAAMC,YACZ,kCACAf,EAAAP,MAAIG,GAAA,KAA6BoB,aAAa;;EAIlD,gBAAAC;IACExB,KAAKY,iBAAiB;;EAWxB,MAAAa;;IACE,OACEC,EAACC,GAAI,MACHD,EAAA;MAAUE,OAAOhC;QACjB8B,EAAA;MAASG,OAAM;OACbH,EAAA;MACEI,KAAKrC;MACLoC,OAAM;MACNE,KAAI;QAGNL,EAAA;MACEG,OAAO;QACLG,aAAe;QACf,wBAAwBhC,KAAKY;;OAG/Bc,EAAA;MAAKG,OAAM;OACR7B,KAAKgB,kBAAe,EAEjBU,EAAA;MAAQG,OAAM;OACZH,EAAA;MACEI,KAAKnC;MACLoC,KAAI;QAENL,EAAA;;MAEEG,OAAM;OAENH,EAAA,cAAOnB,EAAAP,MAAIF,GAAA,KAAkBmC,UAGjCP,EAAA;MAAKG,OAAM;OACTH,EAAA;MAAGG,OAAM;OACNtB,EAAAP,MAAIF,GAAA,KAAkBoC,eAG3BR,EAAA;MAAKG,OAAM;OACTH,EAAA;MAAKG,OAAM;OACTH,EAAA;MAAOS,SAAQ;OACZ5B,EAAAP,MAAIF,GAAA,KAAkBb,QAEzByC,EAAA;MACErC,IAAG;MACH+C,gBAAe;MACfP,OAAM;MACND,OAAOrB,EAAAP,MAAIC,GAAA;MACXb,OACEmB,EAAAP,MAAIC,GAAA,UAAoBoC,IAAA9B,EAAAP,MAAIC,GAAA,KAAiB,QAAE,QAAAoC,WAAA,aAAAA,EAAEjD;MAEnDkD,KAAMlB,KACHL,EAAAf,MAAIE,GACHkB,GAAiC;UAK3CM,EAAA;MAAKG,OAAM;OACTH,EAAA;MACEG,OAAM;MACNU,SAAShC,EAAAP,MAAII,GAAA;OAEZG,EAAAP,MAAIF,GAAA,KAAkB0C,wBAEzBd,EAAA;MACEG,OAAM;MACNU,SAAShC,EAAAP,MAAIQ,GAAA;OAEZD,EAAAP,MAAIF,GAAA,KAAkB2C,0BAK7Bf,EAAA;MACEgB,MAAI;MACJC,aAAapC,EAAAP,MAAIF,GAAA,KAAkB8C,OAAOX;MAC1CY,aAAatC,EAAAP,MAAIF,GAAA,KAAkB8C,OAAOC"}

package/dist/genexus-ide-ui/p-b04a0ae3.entry.js

@@ -0,0 +1,236 @@
+import { a as e, r as i, h as n, H as s, g as t } from "./p-49712340.js";
+
+import { L as a } from "./p-311eedf3.js";
+
+const mapTeamsToComboBoxItemModel = e => {
+  if (!e) {
+    return [];
+  }
+  return e.map((e => ({
+    value: e.id,
+    caption: e.name
+  })));
+};
+
+const r = ":host {\n  display: grid;\n  container-type: inline-size;\n  container-name: host-container;\n  block-size: 100%;\n  inline-size: 100%;\n  align-items: center;\n  justify-content: center;\n  padding: var(--mer-spacing--xl);\n}\n\n.slide {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  block-size: 100%;\n  max-block-size: 700px;\n  max-inline-size: 1100px;\n  background-color: var(--mer-surface__elevation--01);\n  border-radius: var(--mer-spacing--md);\n  overflow: hidden;\n}\n.slide__illustration {\n  overflow: hidden;\n  object-fit: cover;\n  object-position: left;\n  block-size: 100%;\n  inline-size: 100%;\n}\n.slide__main {\n  display: grid;\n  block-size: 100%;\n  inline-size: 100%;\n  padding: var(--mer-spacing--3xl);\n  transform: translateY(var(--mer-spacing--2xs));\n  transition: var(--switch-step-transtion-time) all;\n  opacity: 0;\n}\n.slide__main--visible {\n  transform: translateY(0);\n  opacity: 1;\n}\n.slide__main-container {\n  display: grid;\n  place-self: center;\n  gap: var(--mer-spacing--lg);\n  max-inline-size: 480px;\n}\n.slide__main-header {\n  display: grid;\n  gap: var(--mer-spacing--lg);\n}\n.slide__main-title {\n  display: flex;\n  flex-direction: column;\n  font-size: var(--mer-font__size--xl);\n  font-weight: var(--mer-font__weight--semi-bold);\n  letter-spacing: 0.02em;\n  color: var(--mer-text__on-surface);\n}\n.slide__main-description {\n  display: grid;\n  gap: var(--mer-spacing--2xl);\n  font-size: var(--mer-font__size--sm);\n  font-weight: var(--mer-font__weight--light);\n  line-height: var(--mer-line-height--spaced);\n  color: var(--mer-text__complementary);\n  max-inline-size: 370px;\n}\n\n.teams-list {\n  inline-size: 100%;\n  max-inline-size: 400px;\n}\n\n.main-btn {\n  inline-size: 100%;\n  max-inline-size: 124px;\n}\n\n@container host-container (max-width: 768px) {\n  .slide {\n    grid-template-columns: 1fr 2fr;\n  }\n}\n@container host-container (max-width: 640px) {\n  .slide {\n    grid-template-columns: 1fr 5fr;\n  }\n}\n.hyperlink {\n  text-decoration: underline;\n  cursor: pointer;\n}\n\n.field-inline > .label-agreement {\n  margin-block-start: 0 !important;\n}";
+
+var l = undefined && undefined.__classPrivateFieldGet || function(e, i, n, s) {
+  if (n === "a" && !s) throw new TypeError("Private accessor was defined without a getter");
+  if (typeof i === "function" ? e !== i || !s : !i.has(e)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+  return n === "m" ? s : n === "a" ? s.call(e) : s ? s.value : i.get(e);
+};
+
+var o = undefined && undefined.__classPrivateFieldSet || function(e, i, n, s, t) {
+  if (s === "m") throw new TypeError("Private method is not writable");
+  if (s === "a" && !t) throw new TypeError("Private accessor was defined without a setter");
+  if (typeof i === "function" ? e !== i || !t : !i.has(e)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+  return s === "a" ? t.call(e, n) : t ? t.value = n : i.set(e, n), n;
+};
+
+var h, c, d, f, m, p, g, u, v, b, w, _, x, k;
+
+const y = e(`./gx-ide-assets/welcome-page/images/copyrights-illustration.png`);
+
+const z = e(`./gx-ide-assets/welcome-page/images/icon-next.svg`);
+
+const W = [ "resets/box-sizing", "utils/typography", "components/button", "components/combo-box", "components/checkbox", "utils/form" ];
+
+const M = "on";
+
+const T = class {
+  constructor(e) {
+    i(this, e);
+    /**
+         * The component hard-coded strings translations.
+         */
+    // eslint-disable-next-line @stencil-community/own-props-must-be-private
+        h.set(this, void 0);
+    // Select User Team References :
+        c.set(this, []);
+    d.set(this, void 0);
+    f.set(this, 100);
+    m.set(this, void 0);
+    p.set(this, void 0);
+    g.set(this, (() => {
+      if (this.authStep === "signIn") {
+        this.signInCallback();
+      } else if (this.authStep === "selectUserTeam") {
+        l(this, u, "f").call(this);
+      }
+    }));
+    u.set(this, (async () => {
+      await this.continueCallback(l(this, d, "f").value);
+    }));
+    v.set(this, (() => n("header", {
+      class: "slide__main-header"
+    }, n("img", {
+      src: z,
+      alt: ""
+    }), n("h2", {
+      // Split the title into two spans for better styling
+      class: "slide__main-title"
+    }, n("span", null, l(this, h, "f")[this.authStepInternal].titlePart1), n("span", null, l(this, h, "f")[this.authStepInternal].titlePart2)))));
+    b.set(this, (() => {
+      const e = this.authStep === "signIn" && this.termsConfirmationRequired && !this.termsAndConditionsAccepted;
+      return n("div", null, n("button", {
+        class: "button-primary main-btn",
+        onClick: l(this, g, "f"),
+        disabled: e
+      }, l(this, h, "f")[this.authStepInternal].buttonCaption));
+    }));
+    w.set(this, (() => {
+      const e = l(this, m, "f").value === M;
+      const i = l(this, p, "f").value === M;
+      this.termsAndConditionsAccepted = e && i;
+    }));
+    _.set(this, (e => {
+      e.preventDefault();
+      this.termsCallback();
+    }));
+    x.set(this, (e => {
+      e.preventDefault();
+      this.privacyCallback();
+    }));
+    k.set(this, (() => {
+      var e;
+      if (this.authStepInternal === "signIn") {
+        return [ l(this, v, "f").call(this), n("p", {
+          class: "text-body-regular-l"
+        }, l(this, h, "f").signIn.description), this.termsConfirmationRequired && n("div", {
+          class: "field-group"
+        }, n("div", {
+          // terms and conditions
+          class: "field field-inline"
+        }, n("ch-checkbox", {
+          checkedValue: M,
+          id: "terms-and-conditions",
+          class: "checkbox",
+          ref: e => o(this, m, e, "f"),
+          onInput: l(this, w, "f")
+        }), n("label", {
+          htmlFor: "terms-and-conditions",
+          class: "label label-agreement"
+        }, l(this, h, "f").agreement.termsAndConditionsLabel, n("span", {
+          class: {
+            hyperlink: !!this.termsCallback
+          },
+          onClick: this.termsCallback && l(this, _, "f")
+        }, l(this, h, "f").agreement.termsAndConditionsLink))), n("div", {
+          // privacy policy
+          class: "field field-inline"
+        }, n("ch-checkbox", {
+          checkedValue: M,
+          id: "privacy-policy",
+          class: "checkbox",
+          ref: e => o(this, p, e, "f"),
+          onInput: l(this, w, "f")
+        }), n("label", {
+          htmlFor: "privacy-policy",
+          class: "label label-agreement"
+        }, l(this, h, "f").agreement.privacyAndPolicyLabel, n("span", {
+          class: {
+            hyperlink: !!this.privacyCallback
+          },
+          onClick: this.privacyCallback && l(this, x, "f")
+        }, l(this, h, "f").agreement.privacyAndPolicyLink)))), l(this, b, "f").call(this) ];
+      } else if (this.authStepInternal === "fetchUserTeams" || this.authStepInternal === "settingUpSession") {
+        const e = this.authStepInternal === "fetchUserTeams" ? l(this, h, "f").loader.fetchingTeamsTitle : l(this, h, "f").loader.settingUpSessionTitle;
+        const i = this.authStepInternal === "fetchUserTeams" ? l(this, h, "f").loader.fetchingTeamsDescription : l(this, h, "f").loader.settingUpDescription;
+        return n("gx-ide-loader", {
+          show: true,
+          loaderTitle: e,
+          description: i
+        });
+      } else if (this.authStepInternal === "selectUserTeam") {
+        return [ l(this, v, "f").call(this), n("div", {
+          class: "slide__select-team-description"
+        }, n("p", {
+          class: "text-body-highlighted-l"
+        }, l(this, h, "f").selectUserTeam.infoMessage)), n("div", {
+          class: "field-group"
+        }, n("div", {
+          class: "field field-block"
+        }, n("label", {
+          htmlFor: "teams"
+        }, l(this, h, "f").selectUserTeam.label), n("ch-combo-box-render", {
+          id: "teams",
+          accessibleName: "Teams",
+          class: "combo-box teams-list",
+          model: l(this, c, "f"),
+          value: (e = l(this, c, "f")[0]) === null || e === void 0 ? void 0 : e.value,
+          ref: e => o(this, d, e, "f")
+        }))), l(this, b, "f").call(this) ];
+      }
+    }));
+    this.authStepInternal = undefined;
+    this.slideIsVisible = true;
+    this.termsAndConditionsAccepted = false;
+    this.authStep = "signIn";
+    this.continueCallback = undefined;
+    this.signInCallback = undefined;
+    this.termsConfirmationRequired = false;
+    this.teams = undefined;
+    this.termsCallback = undefined;
+    this.privacyCallback = undefined;
+  }
+  authStepChanged(e) {
+    this.slideIsVisible = false;
+    // switch step
+        setTimeout((() => {
+      this.authStepInternal = e;
+    }), l(this, f, "f"));
+    // show slide
+        setTimeout((() => {
+      this.slideIsVisible = true;
+    }), l(this, f, "f") * 2);
+  }
+  teamsChanged(e) {
+    o(this, c, mapTeamsToComboBoxItemModel(e), "f");
+  }
+  async componentWillLoad() {
+    o(this, h, await a.getComponentStrings(this.el), "f");
+    this.el.style.setProperty("--switch-step-transtion-time", l(this, f, "f").toString() + "ms");
+    // Initialize values
+        this.authStepInternal = this.authStep;
+    this.teamsChanged(this.teams);
+  }
+  render() {
+    return n(s, null, n("ch-theme", {
+      model: W
+    }), n("section", {
+      class: "slide"
+    }, n("img", {
+      src: y,
+      class: "slide__illustration",
+      alt: ""
+    }), n("div", {
+      class: {
+        slide__main: true,
+        "slide__main--visible": this.slideIsVisible
+      }
+    }, n("div", {
+      class: "slide__main-container"
+    }, l(this, k, "f").call(this)))));
+  }
+  static get assetsDirs() {
+    return [ "gx-ide-assets/sign-in-team" ];
+  }
+  get el() {
+    return t(this);
+  }
+  static get watchers() {
+    return {
+      authStep: [ "authStepChanged" ],
+      teams: [ "teamsChanged" ]
+    };
+  }
+};
+
+h = new WeakMap, c = new WeakMap, d = new WeakMap, f = new WeakMap, m = new WeakMap, 
+p = new WeakMap, g = new WeakMap, u = new WeakMap, v = new WeakMap, b = new WeakMap, 
+w = new WeakMap, _ = new WeakMap, x = new WeakMap, k = new WeakMap;
+
+T.style = r;
+
+export { T as gx_ide_sign_in_team };
+//# sourceMappingURL=p-b04a0ae3.entry.js.map