@genexus/genexus-ide-ui 1.0.30 → 1.0.32

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

@@ -0,0 +1,149 @@
+import { r as e, h as t, H as i, g as o } from "./p-49712340.js";
+
+import { g as r } from "./p-7d4c5a43.js";
+
+import { L as n } from "./p-311eedf3.js";
+
+const getInitialsFromName = e => {
+  const t = e.split(" ");
+  if (t.length === 1) {
+    return t[0][0].toUpperCase();
+  } else {
+    return `${t[0][0].toUpperCase()}${t[1][0].toUpperCase()}`;
+  }
+};
+
+const s = "@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}:host{display:inline-grid;justify-items:end}.user-login__button{all:unset;display:grid;grid-template-columns:max-content max-content max-content;align-items:center;gap:var(--mer-spacing--md);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--xs);color:var(--mer-text__on-elevation)}.user-login__organization{font-weight:var(--mer-font__weight--light);font-size:var(--mer-font__size--3xs);color:var(--mer-text__neutral)}.user-login__avatar{flex:0 0 auto;display:flex;align-items:center;justify-content:center;block-size:var(--mer-spacing--xl);inline-size:var(--mer-spacing--xl);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, r) {
+  if (o === "m") throw new TypeError("Private method is not writable");
+  if (o === "a" && !r) throw new TypeError("Private accessor was defined without a setter");
+  if (typeof t === "function" ? e !== t || !r : !t.has(e)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+  return o === "a" ? r.call(e, i) : r ? r.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, d, f, u, m;
+
+const p = [ 
+// 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 = r({
+  category: "navigation",
+  name: "chevron-down",
+  colorType: "neutral"
+});
+
+const g = "my-account";
+
+const _ = "change-team";
+
+const w = "log-out";
+
+const v = "language";
+
+const y = class {
+  constructor(t) {
+    e(this, t);
+    l.set(this, void 0);
+    d.set(this, "");
+    // #mode: Mode;
+        f.set(this, void 0);
+    u.set(this, void 0);
+    // #handleModeSwitch = () => {
+    //   this.#mode = this.#mode === "dark" ? "light" : "dark";
+    //   if (this.changeModeCallback) {
+    //     this.changeModeCallback(this.#mode);
+    //   }
+    // };
+        m.set(this, ((e, t, i) => {
+      if (i === g) {
+        this.myAccountCallback();
+      } else if (i === _) {
+        this.changeTeamCallback();
+      } else if (i === w) {
+        this.changeLanguageCallback();
+      } else if (i === v) {
+        this.signOutCallback();
+      }
+    }));
+    this.showMenu = false;
+    this.userInfo = undefined;
+    this.myAccountCallback = undefined;
+    this.changeTeamCallback = undefined;
+    this.changeLanguageCallback = undefined;
+    this.changeModeCallback = undefined;
+    this.signOutCallback = undefined;
+    this.showTermsCallback = undefined;
+  }
+  async componentWillLoad() {
+    a(this, l, await n.getComponentStrings(this.el), "f");
+    a(this, d, getInitialsFromName(this.userInfo.name), "f");
+    a(this, f, [ {
+      id: g,
+      caption: c(this, l, "f").myAccountLabel,
+      showSeparator: false
+    }, {
+      id: _,
+      caption: c(this, l, "f").changeTeamLabel,
+      showSeparator: false
+    }, {
+      id: w,
+      caption: c(this, l, "f").logOutLabel,
+      showSeparator: true
+    } ], "f");
+  }
+  render() {
+    return t(i, {
+      class: "widget"
+    }, t("ch-theme", {
+      model: p
+    }), t("ch-dropdown-render", {
+      class: "dropdown",
+      model: c(this, f, "f"),
+      position: "InsideEnd_OutsideEnd",
+      itemClickCallback: c(this, m, "f")
+    }, t("button", {
+      class: "user-login__button",
+      ref: e => a(this, u, e, "f"),
+      slot: "action"
+    }, t("div", {
+      class: "user-login__details"
+    }, t("span", {
+      class: "user-login__name"
+    }, this.userInfo.name), t("span", {
+      class: "user-login__organization"
+    }, this.userInfo.team)), t("div", {
+      class: "user-login__avatar"
+    }, c(this, d, "f")), t("ch-image", {
+      src: h,
+      class: "icon-md",
+      containerRef: c(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))));
+  }
+  static get assetsDirs() {
+    return [ "gx-ide-assets/current-user-info" ];
+  }
+  get el() {
+    return o(this);
+  }
+};
+
+l = new WeakMap, d = new WeakMap, f = new WeakMap, u = new WeakMap, m = new WeakMap;
+
+y.style = s;
+
+export { y as gx_ide_current_user_info };
+//# sourceMappingURL=p-edd6ebef.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["getInitialsFromName","name","nameData","split","length","toUpperCase","currentUserInfoCss","CSS_BUNDLES","CHEVRON_DOWN_ICON","getIconPath","category","colorType","MY_ACCOUNT_ID","CHANGE_TEAM_ID","LOGOUT_ID","LANGUAGE_ID","GxIdeNewEnvironment","_GxIdeNewEnvironment_componentLocale","set","this","_GxIdeNewEnvironment_initials","_GxIdeNewEnvironment_menuDropdownModel","_GxIdeNewEnvironment_userLoginButton","_GxIdeNewEnvironment_dropDownitemClickHandler","_event","_target","itemId","myAccountCallback","changeTeamCallback","changeLanguageCallback","signOutCallback","componentWillLoad","__classPrivateFieldSet","Locale","getComponentStrings","el","userInfo","id","caption","__classPrivateFieldGet","myAccountLabel","showSeparator","changeTeamLabel","logOutLabel","render","h","Host","class","model","position","itemClickCallback","ref","slot","team","src","containerRef","onClick","showTermsCallback","privacyAndTerms"],"sources":["src/components/current-user-info/helpers.tsx","src/components/current-user-info/current-user-info.scss?tag=gx-ide-current-user-info&encapsulation=shadow","src/components/current-user-info/current-user-info.tsx"],"sourcesContent":["export const getInitialsFromName = (name: string): string => {\n  const nameData = name.split(\" \");\n  if (nameData.length === 1) {\n    return nameData[0][0].toUpperCase();\n  } else {\n    return `${nameData[0][0].toUpperCase()}${nameData[1][0].toUpperCase()}`;\n  }\n};\n","@import \"../../../node_modules/@genexus/mercury/dist/mercury.scss\";\n\n:host {\n  display: inline-grid;\n  justify-items: end;\n}\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--md);\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--xs);\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--3xs);\n    color: var(--mer-text__neutral);\n  }\n  &__avatar {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    block-size: var(--mer-spacing--xl);\n    inline-size: var(--mer-spacing--xl);\n    color: var(--mer-text__on-elevation);\n    border-radius: 50%;\n    background-color: var(--mer-color__tinted-primary--10);\n    border: var(--mer-border__width--sm) solid var(--mer-color__primary--200);\n  }\n}\n\n.privacy-policy {\n  text-decoration: underline;\n  cursor: pointer;\n}\n","/* STENCIL IMPORTS */\nimport { Component, Element, Host, Prop, State, h } from \"@stencil/core\";\n\nimport { getIconPath, MercuryBundles } from \"@genexus/mercury\";\n\nimport { Locale } from \"../../common/locale\";\nimport { getInitialsFromName } from \"./helpers\";\nimport { DropdownModel } from \"@genexus/chameleon-controls-library\";\n\nconst CSS_BUNDLES: MercuryBundles = [\n  // TODO: review if \"utils/form--full\" is required.\n  \"resets/box-sizing\",\n  \"components/tooltip\",\n  \"components/toggle\",\n  \"components/icon\",\n  \"components/dropdown\",\n  \"utils/layout\",\n  \"utils/typography\",\n  \"utils/spacing\",\n  \"chameleon/scrollbar\"\n];\n\nconst CHEVRON_DOWN_ICON = getIconPath({\n  category: \"navigation\",\n  name: \"chevron-down\",\n  colorType: \"neutral\"\n});\n\nconst MY_ACCOUNT_ID = \"my-account\";\nconst CHANGE_TEAM_ID = \"change-team\";\nconst LOGOUT_ID = \"log-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: LOGOUT_ID,\n        caption: this.#componentLocale.logOutLabel,\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 === LOGOUT_ID) {\n      this.changeLanguageCallback();\n    } else if (itemId === LANGUAGE_ID) {\n      this.signOutCallback();\n    }\n  };\n\n  render() {\n    return (\n      <Host class=\"widget\">\n        <ch-theme model={CSS_BUNDLES}></ch-theme>\n        <ch-dropdown-render\n          class=\"dropdown\"\n          model={this.#menuDropdownModel}\n          position=\"InsideEnd_OutsideEnd\"\n          itemClickCallback={this.#dropDownitemClickHandler}\n        >\n          <button\n            class=\"user-login__button\"\n            ref={el => (this.#userLoginButton = el as HTMLButtonElement)}\n            slot=\"action\"\n          >\n            <div class=\"user-login__details\">\n              <span class=\"user-login__name\">{this.userInfo.name}</span>\n              <span class=\"user-login__organization\">{this.userInfo.team}</span>\n            </div>\n            <div class=\"user-login__avatar\">{this.#initials}</div>\n            <ch-image\n              src={CHEVRON_DOWN_ICON}\n              class=\"icon-md\"\n              containerRef={this.#userLoginButton}\n            ></ch-image>\n          </button>\n          <div class=\"user-login__footer footer-slot\" slot=\"footer\">\n            <p\n              class=\"text-body-regular-s privacy-policy\"\n              onClick={this.showTermsCallback}\n            >\n              {this.#componentLocale.privacyAndTerms}\n            </p>\n          </div>\n        </ch-dropdown-render>\n      </Host>\n    );\n  }\n}\n\nexport type UserInfo = {\n  name: string;\n  team: string;\n};\n\nexport type Mode = \"dark\" | \"light\";\n"],"mappings":";;;;;;AAAO,MAAMA,sBAAuBC;EAClC,MAAMC,IAAWD,EAAKE,MAAM;EAC5B,IAAID,EAASE,WAAW,GAAG;IACzB,OAAOF,EAAS,GAAG,GAAGG;SACjB;IACL,OAAO,GAAGH,EAAS,GAAG,GAAGG,gBAAgBH,EAAS,GAAG,GAAGG;;;;ACL5D,MAAMC,IAAqB;;;;;;;;;;;;;;;;;ACS3B,MAAMC,IAA8B;;AAElC,qBACA,sBACA,qBACA,mBACA,uBACA,gBACA,oBACA,iBACA;;AAGF,MAAMC,IAAoBC,EAAY;EACpCC,UAAU;EACVT,MAAM;EACNU,WAAW;;;AAGb,MAAMC,IAAgB;;AACtB,MAAMC,IAAiB;;AACvB,MAAMC,IAAY;;AAClB,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,GAAW;QAC/BK,KAAKU;aACA,IAAIH,MAAWX,GAAa;QACjCI,KAAKW;;;oBAnFoB;;;;;;;;;EAqC7B,uBAAMC;IACJC,EAAAb,MAAIF,SAA0BgB,EAAOC,oBAAoBf,KAAKgB,KAAG;IACjEH,EAAAb,MAAIC,GAAapB,oBAAoBmB,KAAKiB,SAASnC,OAAK;IACxD+B,EAAAb,MAAIE,GAAsB,EACxB;MACEgB,IAAIzB;MACJ0B,SAASC,EAAApB,MAAIF,GAAA,KAAkBuB;MAC/BC,eAAe;OAEjB;MACEJ,IAAIxB;MACJyB,SAASC,EAAApB,MAAIF,GAAA,KAAkByB;MAC/BD,eAAe;OAEjB;MACEJ,IAAIvB;MACJwB,SAASC,EAAApB,MAAIF,GAAA,KAAkB0B;MAC/BF,eAAe;SAOlB;;EA0BH,MAAAG;IACE,OACEC,EAACC,GAAI;MAACC,OAAM;OACVF,EAAA;MAAUG,OAAOzC;QACjBsC,EAAA;MACEE,OAAM;MACNC,OAAOT,EAAApB,MAAIE,GAAA;MACX4B,UAAS;MACTC,mBAAmBX,EAAApB,MAAII,GAAA;OAEvBsB,EAAA;MACEE,OAAM;MACNI,KAAKhB,KAAOH,EAAAb,MAAIG,GAAoBa,GAAuB;MAC3DiB,MAAK;OAELP,EAAA;MAAKE,OAAM;OACTF,EAAA;MAAME,OAAM;OAAoB5B,KAAKiB,SAASnC,OAC9C4C,EAAA;MAAME,OAAM;OAA4B5B,KAAKiB,SAASiB,QAExDR,EAAA;MAAKE,OAAM;OAAsBR,EAAApB,MAAIC,GAAA,OACrCyB,EAAA;MACES,KAAK9C;MACLuC,OAAM;MACNQ,cAAchB,EAAApB,MAAIG,GAAA;SAGtBuB,EAAA;MAAKE,OAAM;MAAiCK,MAAK;OAC/CP,EAAA;MACEE,OAAM;MACNS,SAASrC,KAAKsC;OAEblB,EAAApB,MAAIF,GAAA,KAAkByC"}

package/dist/genexus-ide-ui/{p-3c3b276e.entry.js → p-f0efd16f.entry.js}

@@ -23,7 +23,7 @@ const c = e(`./gx-ide-assets/welcome-page/images/copyrights-illustration.png`);
 
 const p = e(`./gx-ide-assets/welcome-page/images/icon-next.svg`);
 
-const h = 300;
+const h = 200;
 
 const m = [ "resets/box-sizing", "utils/typography" ];
 
@@ -110,4 +110,4 @@ d = new WeakMap;
 f.style = n;
 
 export { f as gx_ide_splash };
-//# sourceMappingURL=p-3c3b276e.entry.js.map
+//# sourceMappingURL=p-f0efd16f.entry.js.map

package/dist/genexus-ide-ui/{p-3c3b276e.entry.js.map → p-f0efd16f.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["splashCss","COPYRIGHTS_ILLUSTRATION","getAssetPath","ICON_NEXT","SLIDE_FADE_DURATION","CSS_BUNDLES","GxIdeUiSplash","_GxIdeUiSplash_componentLocale","set","this","removeSplashChanged","removeSplash","splashVisible","setTimeout","el","remove","componentWillLoad","__classPrivateFieldSet","Locale","getComponentStrings","componentDidLoad","render","currentYear","Date","getFullYear","h","Host","model","class","slide","style","role","__classPrivateFieldGet","copyright","illustrationAriaLabel","src","alt","illustrationFigureAriaLabel","illustrationAlternativeText","title","version","c1988","allRightsReserved","description"],"sources":["src/components/splash/splash.scss?tag=gx-ide-splash&encapsulation=shadow","src/components/splash/splash.tsx"],"sourcesContent":[":host {\n  display: grid;\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  max-inline-size: 1100px;\n  grid-template-columns: 1fr 550px;\n  background-color: var(--mer-surface__elevation--01);\n  border-radius: var(--mer-spacing--md);\n  overflow: hidden;\n  opacity: 0;\n  transition: var(--slide-fade-duration) opacity;\n\n  &--visible {\n    opacity: 1;\n  }\n\n  &__illustration {\n    overflow: hidden;\n    max-block-size: 700px;\n  }\n\n  &__copy {\n    display: grid;\n    block-size: 100%;\n    inline-size: 100%;\n    padding: var(--mer-spacing--3xl);\n  }\n\n  &__copy-container {\n    display: grid;\n    gap: var(--mer-spacing--md);\n    max-inline-size: 480px;\n    place-self: center;\n  }\n\n  &__copy-header {\n    display: grid;\n    gap: var(--mer-spacing--md);\n  }\n\n  &__copy-title {\n    font-size: var(--mer-font__size--xl);\n    color: var(--mer-text__on-surface);\n    letter-spacing: 0.02em;\n    font-weight: var(--mer-font__weight--semi-bold);\n  }\n\n  &__copy-description {\n    display: grid;\n    color: var(--mer-text__complementary);\n    gap: var(--mer-spacing--md);\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  }\n}\n","// Stencil\nimport {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  State,\n  Watch,\n  getAssetPath\n} from \"@stencil/core\";\n// Other Libraries\nimport { MercuryBundles } from \"@genexus/mercury\";\n// Custom Imports\nimport { Locale } from \"../../common/locale\";\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 SLIDE_FADE_DURATION = 300;\nconst CSS_BUNDLES: MercuryBundles = [\"resets/box-sizing\", \"utils/typography\"];\n\n@Component({\n  tag: \"gx-ide-splash\",\n  styleUrl: \"splash.scss\",\n  shadow: true,\n  assetsDirs: [\"gx-ide-assets/splash\"]\n})\nexport class GxIdeUiSplash {\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\n  @Element() el: HTMLGxIdeSplashElement;\n\n  /**\n   * When true the slider will be visible. Used to display and hide the slide with a smooth transition.\n   */\n  @State() splashVisible: boolean = false;\n\n  /**\n   * The copyright version. ie.: \"Salto 103300\"\n   */\n  @Prop() readonly version!: string;\n\n  /**\n   * If true, the splash with first disappear with a fade-out subtle effect, and then it will automatically be removed from the DOM.\n   */\n  @Prop() readonly removeSplash: boolean = false;\n  @Watch(\"removeSplash\")\n  removeSplashChanged(removeSplash: boolean) {\n    if (removeSplash) {\n      this.splashVisible = false;\n      setTimeout(() => {\n        // wait until the slide disappears, then remove.\n        this.el.remove();\n      }, SLIDE_FADE_DURATION);\n    }\n  }\n\n  async componentWillLoad() {\n    this.#componentLocale = await Locale.getComponentStrings(this.el);\n  }\n\n  componentDidLoad() {\n    this.splashVisible = true;\n  }\n\n  render() {\n    const currentYear = new Date().getFullYear();\n\n    return (\n      <Host>\n        <ch-theme model={CSS_BUNDLES}></ch-theme>\n        <section\n          class={{ \"slide\": true, \"slide--visible\": this.splashVisible }}\n          style={{ \"--slide-fade-duration\": `${SLIDE_FADE_DURATION}ms` }}\n        >\n          <div\n            class=\"slide__illustration\"\n            role=\"img\"\n            aria-label={this.#componentLocale.copyright.illustrationAriaLabel}\n          >\n            <img\n              // base image (acts like a background)\n              src={COPYRIGHTS_ILLUSTRATION}\n              class=\"slide__illustration\"\n              alt={this.#componentLocale.copyright.illustrationFigureAriaLabel}\n            />\n          </div>\n          <section class=\"slide__copy\">\n            <div class=\"slide__copy-container\">\n              <header class=\"slide__copy-header\">\n                <img\n                  src={ICON_NEXT}\n                  alt={\n                    this.#componentLocale.copyright.illustrationAlternativeText\n                  }\n                />\n                <h2 class=\"slide__copy-title\">\n                  {this.#componentLocale.copyright.title}\n                </h2>\n              </header>\n              <div class=\"slide__copy-description\">\n                <p>\n                  <span class=\"version\">\n                    {this.#componentLocale.copyright.version}\n                    <span>{this.version}</span>\n                  </span>\n                  <span>{this.#componentLocale.copyright.c1988}</span>\n                  <span> — {currentYear} </span>\n                  <span>\n                    {this.#componentLocale.copyright.allRightsReserved}\n                  </span>\n                </p>\n                <p>{this.#componentLocale.copyright.description}</p>\n              </div>\n            </div>\n          </section>\n        </section>\n      </Host>\n    );\n  }\n}\n"],"mappings":";;;;AAAA,MAAMA,IAAY;;;;;;;;;;;;;;;;;ACgBlB,MAAMC,IAA0BC,EAC9B;;AAEF,MAAMC,IAAYD,EAChB;;AAEF,MAAME,IAAsB;;AAC5B,MAAMC,IAA8B,EAAC,qBAAqB;;MAQ7CC,IAAa;;;;;;;QAKxBC,EAAAC,IAAAC,WAAA;yBAOkC;;wBAUO;;EAEzC,mBAAAC,CAAoBC;IAClB,IAAIA,GAAc;MAChBF,KAAKG,gBAAgB;MACrBC,YAAW;;QAETJ,KAAKK,GAAGC;AAAQ,UACfX;;;EAIP,uBAAMY;IACJC,EAAAR,MAAIF,SAA0BW,EAAOC,oBAAoBV,KAAKK,KAAG;;EAGnE,gBAAAM;IACEX,KAAKG,gBAAgB;;EAGvB,MAAAS;IACE,MAAMC,KAAc,IAAIC,MAAOC;IAE/B,OACEC,EAACC,GAAI,MACHD,EAAA;MAAUE,OAAOtB;QACjBoB,EAAA;MACEG,OAAO;QAAEC,OAAS;QAAM,kBAAkBpB,KAAKG;;MAC/CkB,OAAO;QAAE,yBAAyB,GAAG1B;;OAErCqB,EAAA;MACEG,OAAM;MACNG,MAAK;MAAK,cACEC,EAAAvB,MAAIF,GAAA,KAAkB0B,UAAUC;OAE5CT,EAAA;;MAEEU,KAAKlC;MACL2B,OAAM;MACNQ,KAAKJ,EAAAvB,MAAIF,GAAA,KAAkB0B,UAAUI;SAGzCZ,EAAA;MAASG,OAAM;OACbH,EAAA;MAAKG,OAAM;OACTH,EAAA;MAAQG,OAAM;OACZH,EAAA;MACEU,KAAKhC;MACLiC,KACEJ,EAAAvB,MAAIF,GAAA,KAAkB0B,UAAUK;QAGpCb,EAAA;MAAIG,OAAM;OACPI,EAAAvB,MAAIF,GAAA,KAAkB0B,UAAUM,SAGrCd,EAAA;MAAKG,OAAM;OACTH,EAAA,WACEA,EAAA;MAAMG,OAAM;OACTI,EAAAvB,MAAIF,GAAA,KAAkB0B,UAAUO,SACjCf,EAAA,cAAOhB,KAAK+B,WAEdf,EAAA,cAAOO,EAAAvB,MAAIF,GAAA,KAAkB0B,UAAUQ,QACvChB,EAAA,qBAAUH,GAAW,MACrBG,EAAA,cACGO,EAAAvB,MAAIF,GAAA,KAAkB0B,UAAUS,qBAGrCjB,EAAA,WAAIO,EAAAvB,MAAIF,GAAA,KAAkB0B,UAAUU"}
+{"version":3,"names":["splashCss","COPYRIGHTS_ILLUSTRATION","getAssetPath","ICON_NEXT","SLIDE_FADE_DURATION","CSS_BUNDLES","GxIdeUiSplash","_GxIdeUiSplash_componentLocale","set","this","removeSplashChanged","removeSplash","splashVisible","setTimeout","el","remove","componentWillLoad","__classPrivateFieldSet","Locale","getComponentStrings","componentDidLoad","render","currentYear","Date","getFullYear","h","Host","model","class","slide","style","role","__classPrivateFieldGet","copyright","illustrationAriaLabel","src","alt","illustrationFigureAriaLabel","illustrationAlternativeText","title","version","c1988","allRightsReserved","description"],"sources":["src/components/splash/splash.scss?tag=gx-ide-splash&encapsulation=shadow","src/components/splash/splash.tsx"],"sourcesContent":[":host {\n  display: grid;\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  max-inline-size: 1100px;\n  grid-template-columns: 1fr 550px;\n  background-color: var(--mer-surface__elevation--01);\n  border-radius: var(--mer-spacing--md);\n  overflow: hidden;\n  opacity: 0;\n  transition: var(--slide-fade-duration) opacity;\n\n  &--visible {\n    opacity: 1;\n  }\n\n  &__illustration {\n    overflow: hidden;\n    max-block-size: 700px;\n  }\n\n  &__copy {\n    display: grid;\n    block-size: 100%;\n    inline-size: 100%;\n    padding: var(--mer-spacing--3xl);\n  }\n\n  &__copy-container {\n    display: grid;\n    gap: var(--mer-spacing--md);\n    max-inline-size: 480px;\n    place-self: center;\n  }\n\n  &__copy-header {\n    display: grid;\n    gap: var(--mer-spacing--md);\n  }\n\n  &__copy-title {\n    font-size: var(--mer-font__size--xl);\n    color: var(--mer-text__on-surface);\n    letter-spacing: 0.02em;\n    font-weight: var(--mer-font__weight--semi-bold);\n  }\n\n  &__copy-description {\n    display: grid;\n    color: var(--mer-text__complementary);\n    gap: var(--mer-spacing--md);\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  }\n}\n","// Stencil\nimport {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  State,\n  Watch,\n  getAssetPath\n} from \"@stencil/core\";\n// Other Libraries\nimport { MercuryBundles } from \"@genexus/mercury\";\n// Custom Imports\nimport { Locale } from \"../../common/locale\";\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 SLIDE_FADE_DURATION = 200;\nconst CSS_BUNDLES: MercuryBundles = [\"resets/box-sizing\", \"utils/typography\"];\n\n@Component({\n  tag: \"gx-ide-splash\",\n  styleUrl: \"splash.scss\",\n  shadow: true,\n  assetsDirs: [\"gx-ide-assets/splash\"]\n})\nexport class GxIdeUiSplash {\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\n  @Element() el: HTMLGxIdeSplashElement;\n\n  /**\n   * When true the slider will be visible. Used to display and hide the slide with a smooth transition.\n   */\n  @State() splashVisible: boolean = false;\n\n  /**\n   * The copyright version. ie.: \"Salto 103300\"\n   */\n  @Prop() readonly version!: string;\n\n  /**\n   * If true, the splash with first disappear with a fade-out subtle effect, and then it will automatically be removed from the DOM.\n   */\n  @Prop() readonly removeSplash: boolean = false;\n  @Watch(\"removeSplash\")\n  removeSplashChanged(removeSplash: boolean) {\n    if (removeSplash) {\n      this.splashVisible = false;\n      setTimeout(() => {\n        // wait until the slide disappears, then remove.\n        this.el.remove();\n      }, SLIDE_FADE_DURATION);\n    }\n  }\n\n  async componentWillLoad() {\n    this.#componentLocale = await Locale.getComponentStrings(this.el);\n  }\n\n  componentDidLoad() {\n    this.splashVisible = true;\n  }\n\n  render() {\n    const currentYear = new Date().getFullYear();\n\n    return (\n      <Host>\n        <ch-theme model={CSS_BUNDLES}></ch-theme>\n        <section\n          class={{ \"slide\": true, \"slide--visible\": this.splashVisible }}\n          style={{ \"--slide-fade-duration\": `${SLIDE_FADE_DURATION}ms` }}\n        >\n          <div\n            class=\"slide__illustration\"\n            role=\"img\"\n            aria-label={this.#componentLocale.copyright.illustrationAriaLabel}\n          >\n            <img\n              // base image (acts like a background)\n              src={COPYRIGHTS_ILLUSTRATION}\n              class=\"slide__illustration\"\n              alt={this.#componentLocale.copyright.illustrationFigureAriaLabel}\n            />\n          </div>\n          <section class=\"slide__copy\">\n            <div class=\"slide__copy-container\">\n              <header class=\"slide__copy-header\">\n                <img\n                  src={ICON_NEXT}\n                  alt={\n                    this.#componentLocale.copyright.illustrationAlternativeText\n                  }\n                />\n                <h2 class=\"slide__copy-title\">\n                  {this.#componentLocale.copyright.title}\n                </h2>\n              </header>\n              <div class=\"slide__copy-description\">\n                <p>\n                  <span class=\"version\">\n                    {this.#componentLocale.copyright.version}\n                    <span>{this.version}</span>\n                  </span>\n                  <span>{this.#componentLocale.copyright.c1988}</span>\n                  <span> — {currentYear} </span>\n                  <span>\n                    {this.#componentLocale.copyright.allRightsReserved}\n                  </span>\n                </p>\n                <p>{this.#componentLocale.copyright.description}</p>\n              </div>\n            </div>\n          </section>\n        </section>\n      </Host>\n    );\n  }\n}\n"],"mappings":";;;;AAAA,MAAMA,IAAY;;;;;;;;;;;;;;;;;ACgBlB,MAAMC,IAA0BC,EAC9B;;AAEF,MAAMC,IAAYD,EAChB;;AAEF,MAAME,IAAsB;;AAC5B,MAAMC,IAA8B,EAAC,qBAAqB;;MAQ7CC,IAAa;;;;;;;QAKxBC,EAAAC,IAAAC,WAAA;yBAOkC;;wBAUO;;EAEzC,mBAAAC,CAAoBC;IAClB,IAAIA,GAAc;MAChBF,KAAKG,gBAAgB;MACrBC,YAAW;;QAETJ,KAAKK,GAAGC;AAAQ,UACfX;;;EAIP,uBAAMY;IACJC,EAAAR,MAAIF,SAA0BW,EAAOC,oBAAoBV,KAAKK,KAAG;;EAGnE,gBAAAM;IACEX,KAAKG,gBAAgB;;EAGvB,MAAAS;IACE,MAAMC,KAAc,IAAIC,MAAOC;IAE/B,OACEC,EAACC,GAAI,MACHD,EAAA;MAAUE,OAAOtB;QACjBoB,EAAA;MACEG,OAAO;QAAEC,OAAS;QAAM,kBAAkBpB,KAAKG;;MAC/CkB,OAAO;QAAE,yBAAyB,GAAG1B;;OAErCqB,EAAA;MACEG,OAAM;MACNG,MAAK;MAAK,cACEC,EAAAvB,MAAIF,GAAA,KAAkB0B,UAAUC;OAE5CT,EAAA;;MAEEU,KAAKlC;MACL2B,OAAM;MACNQ,KAAKJ,EAAAvB,MAAIF,GAAA,KAAkB0B,UAAUI;SAGzCZ,EAAA;MAASG,OAAM;OACbH,EAAA;MAAKG,OAAM;OACTH,EAAA;MAAQG,OAAM;OACZH,EAAA;MACEU,KAAKhC;MACLiC,KACEJ,EAAAvB,MAAIF,GAAA,KAAkB0B,UAAUK;QAGpCb,EAAA;MAAIG,OAAM;OACPI,EAAAvB,MAAIF,GAAA,KAAkB0B,UAAUM,SAGrCd,EAAA;MAAKG,OAAM;OACTH,EAAA,WACEA,EAAA;MAAMG,OAAM;OACTI,EAAAvB,MAAIF,GAAA,KAAkB0B,UAAUO,SACjCf,EAAA,cAAOhB,KAAK+B,WAEdf,EAAA,cAAOO,EAAAvB,MAAIF,GAAA,KAAkB0B,UAAUQ,QACvChB,EAAA,qBAAUH,GAAW,MACrBG,EAAA,cACGO,EAAAvB,MAAIF,GAAA,KAAkB0B,UAAUS,qBAGrCjB,EAAA,WAAIO,EAAAvB,MAAIF,GAAA,KAAkB0B,UAAUU"}

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

@@ -0,0 +1,162 @@
+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 => {
+  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}\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.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}";
+
+var o = undefined && undefined.__classPrivateFieldGet || function(e, n, i, t) {
+  if (i === "a" && !t) throw new TypeError("Private accessor was defined without a getter");
+  if (typeof n === "function" ? e !== n || !t : !n.has(e)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+  return i === "m" ? t : i === "a" ? t.call(e) : t ? t.value : n.get(e);
+};
+
+var l = undefined && undefined.__classPrivateFieldSet || function(e, n, i, t, s) {
+  if (t === "m") throw new TypeError("Private method is not writable");
+  if (t === "a" && !s) throw new TypeError("Private accessor was defined without a setter");
+  if (typeof n === "function" ? e !== n || !s : !n.has(e)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+  return t === "a" ? s.call(e, i) : s ? s.value = i : n.set(e, i), i;
+};
+
+var c, d, h, m, p, f;
+
+const g = e(`./gx-ide-assets/welcome-page/images/copyrights-illustration.png`);
+
+const u = e(`./gx-ide-assets/welcome-page/images/icon-next.svg`);
+
+const _ = [ "resets/box-sizing", "utils/typography", "components/button", "components/combo-box" ];
+
+const v = class {
+  constructor(e) {
+    n(this, e);
+    /**
+         * The component hard-coded strings translations.
+         */
+    // eslint-disable-next-line @stencil-community/own-props-must-be-private
+        c.set(this, void 0);
+    // Select User Team References :
+        d.set(this, []);
+    h.set(this, void 0);
+    m.set(this, 100);
+    p.set(this, (() => {
+      console.log("authStepCallback called");
+      if (this.authStep === "signIn") {
+        this.signInCallback();
+      } else if (this.authStep === "selectUserTeam") {
+        o(this, f, "f").call(this);
+      }
+    }));
+    f.set(this, (async () => {
+      console.log("continueHandler called");
+      await this.continueCallback(o(this, h, "f").value);
+    }));
+    this.authStepInternal = undefined;
+    this.slideIsVisible = true;
+    this.authStep = "signIn";
+    this.continueCallback = undefined;
+    this.signInCallback = undefined;
+    this.teams = undefined;
+    this.termsCallback = undefined;
+  }
+  authStepChanged(e) {
+    console.log("authStep changed");
+    this.slideIsVisible = false;
+    // switch step
+        setTimeout((() => {
+      this.authStepInternal = e;
+    }), o(this, m, "f"));
+    // show slide
+        setTimeout((() => {
+      this.slideIsVisible = true;
+    }), o(this, m, "f") * 2);
+  }
+  async componentWillLoad() {
+    l(this, c, await a.getComponentStrings(this.el), "f");
+    this.authStepInternal = this.authStep;
+    l(this, d, mapTeamsToComboBoxItemModel(this.teams), "f");
+    this.el.style.setProperty("--switch-step-transtion-time", o(this, m, "f").toString() + "ms");
+  }
+  render() {
+    var e;
+    console.log("userTeams comboBox model", o(this, d, "f"));
+    return i(t, null, i("ch-theme", {
+      model: _
+    }), i("section", {
+      class: "slide"
+    }, i("img", {
+      src: g,
+      class: "slide__illustration",
+      alt: ""
+    }), i("div", {
+      class: {
+        slide__main: true,
+        "slide__main--visible": this.slideIsVisible
+      }
+    }, i("div", {
+      class: "slide__main-container"
+    }, i("header", {
+      class: "slide__main-header"
+    }, i("img", {
+      src: u,
+      alt: ""
+    }), i("h2", {
+      // Split the title into two spans for better styling
+      class: "slide__main-title"
+    }, i("span", null, o(this, c, "f")[this.authStepInternal].titlePart1), i("span", null, o(this, c, "f")[this.authStepInternal].titlePart2))), this.authStepInternal === "signIn" ? i("div", {
+      class: "slide__main-description"
+    }, i("p", {
+      hidden: true
+    }, i("span", null, o(this, c, "f").descriptionText)), i("span", null, o(this, c, "f").signIn.byContinuingText, i("a", {
+      class: "terms-conditions",
+      onClick: this.termsCallback
+    }, o(this, c, "f").signIn.byContinuingCallBackText))) : [ i("div", {
+      class: "slide__select-team-description"
+    }, i("p", {
+      class: "text-body-highlighted-l"
+    }, o(this, c, "f").selectUserTeam.infoMessage)), i("div", {
+      class: "field-group"
+    }, i("div", {
+      class: "field field-block"
+    }, i("label", {
+      htmlFor: "teams"
+    }, o(this, c, "f").teams), i("ch-combo-box-render", {
+      id: "teams",
+      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,
+      ref: e => l(this, h, e, "f")
+    }))) ], i("div", null, i("button", {
+      class: "button-primary main-btn",
+      onClick: o(this, p, "f")
+    }, o(this, c, "f")[this.authStepInternal].buttonCaption))))));
+  }
+  static get assetsDirs() {
+    return [ "gx-ide-assets/sign-in-team" ];
+  }
+  get el() {
+    return s(this);
+  }
+  static get watchers() {
+    return {
+      authStep: [ "authStepChanged" ]
+    };
+  }
+};
+
+c = new WeakMap, d = new WeakMap, h = new WeakMap, m = new WeakMap, p = new WeakMap, 
+f = new WeakMap;
+
+v.style = r;
+
+export { v as gx_ide_sign_in_team };
+//# sourceMappingURL=p-fe063c9e.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["mapTeamsToComboBoxItemModel","teams","map","team","value","id","caption","name","signInTeamCss","COPYRIGHTS_ILLUSTRATION","getAssetPath","ICON_NEXT","CSS_BUNDLES","GxIdeUiSplash","_GxIdeUiSplash_componentLocale","set","this","_GxIdeUiSplash_userTeamsModel","_GxIdeUiSplash_chSelectTeamEl","_GxIdeUiSplash_switchStepTransitionTime","_GxIdeUiSplash_authStepCallback","console","log","authStep","signInCallback","__classPrivateFieldGet","_GxIdeUiSplash_continueHandler","call","async","continueCallback","authStepChanged","newAuthStep","slideIsVisible","setTimeout","authStepInternal","componentWillLoad","__classPrivateFieldSet","Locale","getComponentStrings","el","style","setProperty","toString","render","h","Host","model","class","src","alt","slide__main","titlePart1","titlePart2","hidden","descriptionText","signIn","byContinuingText","onClick","termsCallback","byContinuingCallBackText","selectUserTeam","infoMessage","htmlFor","accessibleName","_a","ref","buttonCaption"],"sources":["src/components/sign-in-team/helpers.ts","src/components/sign-in-team/sign-in-team.scss?tag=gx-ide-sign-in-team&encapsulation=shadow","src/components/sign-in-team/sign-in-team.tsx"],"sourcesContent":["import { ComboBoxItemModel } from \"@genexus/chameleon-controls-library/dist/types/components/combo-box/types\";\nimport { TeamData } from \"./sign-in-team\";\n\nexport const mapTeamsToComboBoxItemModel = (\n  teams?: TeamData[]\n): ComboBoxItemModel[] | undefined => {\n  if (!teams) {\n    return [];\n  }\n  return teams.map(team => ({\n    value: team.id,\n    caption: team.name\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(--switch-step-transtion-time) all;\n    opacity: 0;\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.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\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-sign-in-team\",\n  styleUrl: \"sign-in-team.scss\",\n  shadow: true,\n  assetsDirs: [\"gx-ide-assets/sign-in-team\"]\n})\nexport class GxIdeUiSplash {\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  #switchStepTransitionTime: number = 100;\n\n  @Element() el: HTMLGxIdeSignInTeamElement;\n\n  /**\n   * This is a handover from \"authStep\" that allows updating descriptions once\n   * the slide is hidden. This enables a smooth transition between descriptions.\n   */\n\n  @State() authStepInternal: AuthStep;\n\n  /**\n   * Defines if the main slide is visible or not. Used for smooth transitions\n   * between slides.\n   */\n  @State() slideIsVisible: boolean = true;\n\n  /**\n   * The authentication step to display\n   */\n  @Prop() readonly authStep: AuthStep = \"signIn\";\n  @Watch(\"authStep\")\n  authStepChanged(newAuthStep: AuthStep) {\n    console.log(\"authStep changed\");\n    this.slideIsVisible = false;\n    // switch step\n    setTimeout(() => {\n      this.authStepInternal = newAuthStep;\n    }, this.#switchStepTransitionTime);\n    // show slide\n    setTimeout(() => {\n      this.slideIsVisible = true;\n    }, this.#switchStepTransitionTime * 2);\n  }\n\n  /**\n   * Callback executed when the user clicks the 'Continue' button\n   */\n  @Prop() readonly continueCallback!: (teamId: string) => Promise<void>;\n\n  /**\n   * Callback executed when the user click the \"Sign In\" button\n   */\n  @Prop() readonly signInCallback: () => Promise<void>;\n\n  /**\n   * Array that contains the user's teams\n   */\n  @Prop() readonly teams!: TeamData[];\n\n  /**\n   * Callback executed when the user clicks on the \"term and conditions\" link\n   */\n  @Prop() readonly termsCallback: () => Promise<void>;\n\n  async componentWillLoad() {\n    this.#componentLocale = await Locale.getComponentStrings(this.el);\n    this.authStepInternal = this.authStep;\n    this.#userTeamsModel = mapTeamsToComboBoxItemModel(this.teams);\n    this.el.style.setProperty(\n      \"--switch-step-transtion-time\",\n      this.#switchStepTransitionTime.toString() + \"ms\"\n    );\n  }\n\n  #authStepCallback = () => {\n    console.log(\"authStepCallback called\");\n    if (this.authStep === \"signIn\") {\n      this.signInCallback();\n    } else if (this.authStep === \"selectUserTeam\") {\n      this.#continueHandler();\n    }\n  };\n\n  #continueHandler = async () => {\n    console.log(\"continueHandler called\");\n    await this.continueCallback(this.#chSelectTeamEl.value);\n  };\n\n  render() {\n    console.log(\"userTeams comboBox model\", this.#userTeamsModel);\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              <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>\n                    {this.#componentLocale[this.authStepInternal].titlePart1}\n                  </span>\n                  <span>\n                    {this.#componentLocale[this.authStepInternal].titlePart2}\n                  </span>\n                </h2>\n              </header>\n\n              {this.authStepInternal === \"signIn\" ? (\n                <div class=\"slide__main-description\">\n                  <p hidden>\n                    <span>{this.#componentLocale.descriptionText}</span>\n                  </p>\n                  <span>\n                    {this.#componentLocale.signIn.byContinuingText}\n                    <a class=\"terms-conditions\" onClick={this.termsCallback}>\n                      {this.#componentLocale.signIn.byContinuingCallBackText}\n                    </a>\n                  </span>\n                </div>\n              ) : (\n                [\n                  <div class=\"slide__select-team-description\">\n                    <p class=\"text-body-highlighted-l\">\n                      {this.#componentLocale.selectUserTeam.infoMessage}\n                    </p>\n                  </div>,\n\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={this.#userTeamsModel[0]?.value}\n                        ref={(el: HTMLChComboBoxRenderElement) =>\n                          (this.#chSelectTeamEl =\n                            el as HTMLChComboBoxRenderElement)\n                        }\n                      ></ch-combo-box-render>\n                    </div>\n                  </div>\n                ]\n              )}\n\n              <div>\n                <button\n                  class=\"button-primary main-btn\"\n                  onClick={this.#authStepCallback}\n                >\n                  {this.#componentLocale[this.authStepInternal].buttonCaption}\n                </button>\n              </div>\n            </div>\n          </div>\n        </section>\n      </Host>\n    );\n  }\n}\n\nexport type AuthStep = \"signIn\" | \"selectUserTeam\";\n\nexport type TeamData = {\n  id: string;\n  name: string;\n};\n"],"mappings":";;;;AAGO,MAAMA,8BACXC;EAEA,KAAKA,GAAO;IACV,OAAO;;EAET,OAAOA,EAAMC,KAAIC,MAAI;IACnBC,OAAOD,EAAKE;IACZC,SAASH,EAAKI;;AACb;;ACZL,MAAMC,IAAgB;;;;;;;;;;;;;;;;;ACkBtB,MAAMC,IAA0BC,EAC9B;;AAEF,MAAMC,IAAYD,EAChB;;AAEF,MAAME,IAA8B,EAClC,qBACA,oBACA,qBACA;;MASWC,IAAa;;;;;;;QAKxBC,EAAAC,IAAAC,WAAA;;QAEAC,EAAAF,IAAAC,MAAuC;IACvCE,EAAAH,IAAAC,WAAA;IACAG,EAAAJ,IAAAC,MAAoC;IAiEpCI,EAAAL,IAAAC,OAAoB;MAClBK,QAAQC,IAAI;MACZ,IAAIN,KAAKO,aAAa,UAAU;QAC9BP,KAAKQ;aACA,IAAIR,KAAKO,aAAa,kBAAkB;QAC7CE,EAAAT,MAAIU,GAAA,KAAiBC,KAArBX;;;IAIJU,EAAAX,IAAAC,OAAmBY;MACjBP,QAAQC,IAAI;YACNN,KAAKa,iBAAiBJ,EAAAT,MAAIE,GAAA,KAAiBd;AAAM;;0BA7DtB;oBAKG;;;;;;EAEtC,eAAA0B,CAAgBC;IACdV,QAAQC,IAAI;IACZN,KAAKgB,iBAAiB;;QAEtBC,YAAW;MACTjB,KAAKkB,mBAAmBH;AAAW,QAClCN,EAAAT,MAAIG,GAAA;;QAEPc,YAAW;MACTjB,KAAKgB,iBAAiB;AAAI,QACzBP,EAAAT,MAAIG,GAAA,OAA6B;;EAuBtC,uBAAMgB;IACJC,EAAApB,MAAIF,SAA0BuB,EAAOC,oBAAoBtB,KAAKuB,KAAG;IACjEvB,KAAKkB,mBAAmBlB,KAAKO;IAC7Ba,EAAApB,MAAIC,GAAmBjB,4BAA4BgB,KAAKf,QAAM;IAC9De,KAAKuB,GAAGC,MAAMC,YACZ,gCACAhB,EAAAT,MAAIG,GAAA,KAA2BuB,aAAa;;EAkBhD,MAAAC;;IACEtB,QAAQC,IAAI,4BAA4BG,EAAAT,MAAIC,GAAA;IAC5C,OACE2B,EAACC,GAAI,MACHD,EAAA;MAAUE,OAAOlC;QACjBgC,EAAA;MAASG,OAAM;OACbH,EAAA;MACEI,KAAKvC;MACLsC,OAAM;MACNE,KAAI;QAGNL,EAAA;MACEG,OAAO;QACLG,aAAe;QACf,wBAAwBlC,KAAKgB;;OAG/BY,EAAA;MAAKG,OAAM;OACTH,EAAA;MAAQG,OAAM;OACZH,EAAA;MACEI,KAAKrC;MACLsC,KAAI;QAENL,EAAA;;MAEEG,OAAM;OAENH,EAAA,cACGnB,EAAAT,MAAIF,GAAA,KAAkBE,KAAKkB,kBAAkBiB,aAEhDP,EAAA,cACGnB,EAAAT,MAAIF,GAAA,KAAkBE,KAAKkB,kBAAkBkB,eAKnDpC,KAAKkB,qBAAqB,WACzBU,EAAA;MAAKG,OAAM;OACTH,EAAA;MAAGS,QAAM;OACPT,EAAA,cAAOnB,EAAAT,MAAIF,GAAA,KAAkBwC,mBAE/BV,EAAA,cACGnB,EAAAT,MAAIF,GAAA,KAAkByC,OAAOC,kBAC9BZ,EAAA;MAAGG,OAAM;MAAmBU,SAASzC,KAAK0C;OACvCjC,EAAAT,MAAIF,GAAA,KAAkByC,OAAOI,8BAG9B,EAGJf,EAAA;MAAKG,OAAM;OACTH,EAAA;MAAGG,OAAM;OACNtB,EAAAT,MAAIF,GAAA,KAAkB8C,eAAeC,eAI1CjB,EAAA;MAAKG,OAAM;OACTH,EAAA;MAAKG,OAAM;OACTH,EAAA;MAAOkB,SAAQ;OACZrC,EAAAT,MAAIF,GAAA,KAAkBb,QAEzB2C,EAAA;MACEvC,IAAG;MACH0D,gBAAe;MACfhB,OAAM;MACND,OAAOrB,EAAAT,MAAIC,GAAA;MACXb,QAAO4D,IAAAvC,EAAAT,MAAIC,GAAA,KAAiB,QAAE,QAAA+C,WAAA,aAAAA,EAAE5D;MAChC6D,KAAM1B,KACHH,EAAApB,MAAIE,GACHqB,GAAiC;YAQ/CK,EAAA,aACEA,EAAA;MACEG,OAAM;MACNU,SAAShC,EAAAT,MAAII,GAAA;OAEZK,EAAAT,MAAIF,GAAA,KAAkBE,KAAKkB,kBAAkBgC"}

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

@@ -0,0 +1,40 @@
+export declare class GxIdeNewEnvironment {
+    #private;
+    el: HTMLGxIdeCurrentUserInfoElement;
+    showMenu: boolean;
+    /**
+     * User data
+     */
+    readonly userInfo: UserInfo;
+    /**
+     * Callback executed when the user click "My Account" link
+     */
+    readonly myAccountCallback: () => Promise<void>;
+    /**
+     * Callback executed when the user click "change team" link
+     */
+    readonly changeTeamCallback: () => Promise<void>;
+    /**
+     * Callback executed when the user click "Language" link
+     */
+    readonly changeLanguageCallback: () => Promise<void>;
+    /**
+     * Callback executed when the user switch the "Mode" status
+     */
+    readonly changeModeCallback: (mode: Mode) => Promise<void>;
+    /**
+     * Callback executed when the user click "Sign Out" link
+     */
+    readonly signOutCallback: () => Promise<void>;
+    /**
+     * Callback executed when the user click "Privacy Policy & Terms of use" link
+     */
+    readonly showTermsCallback: () => Promise<void>;
+    componentWillLoad(): Promise<void>;
+    render(): any;
+}
+export type UserInfo = {
+    name: string;
+    team: string;
+};
+export type Mode = "dark" | "light";

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

@@ -0,0 +1 @@
+export declare const getInitialsFromName: (name: string) => string;

package/dist/types/components/select-user-team/helpers.d.ts

@@ -0,0 +1,3 @@
+import { ComboBoxItemModel } from "@genexus/chameleon-controls-library/dist/types/components/combo-box/types";
+import { TeamData } from "./select-user-team";
+export declare const mapTeamsToComboBoxItemModel: (teams: TeamData[]) => ComboBoxItemModel[];

package/dist/types/components/select-user-team/select-user-team.d.ts

@@ -0,0 +1,18 @@
+export declare class GxIdeUiSplash {
+    #private;
+    /**
+     * Array that contain the user's teams
+     */
+    readonly teams: TeamData[];
+    /**
+     * Callback executed when the user click the 'continue' button
+     */
+    readonly continueCallback: (teamId: string) => Promise<void>;
+    el: HTMLGxIdeSelectUserTeamElement;
+    componentWillLoad(): Promise<void>;
+    render(): any;
+}
+export type TeamData = {
+    id: string;
+    name: string;
+};

package/dist/types/components/sign-in/sign-in.d.ts

@@ -0,0 +1,14 @@
+export declare class GxIdeUiSplash {
+    #private;
+    el: HTMLGxIdeSignInElement;
+    /**
+     * Callback executed when the user click on the "term and conditions" link
+     */
+    readonly termsCallback: () => Promise<void>;
+    /**
+     * Callback executed when the user click the Sign In button
+     */
+    readonly signInCallback: () => Promise<void>;
+    componentWillLoad(): Promise<void>;
+    render(): any;
+}

package/dist/types/components/sign-in-team/helpers.d.ts

@@ -0,0 +1,3 @@
+import { ComboBoxItemModel } from "@genexus/chameleon-controls-library/dist/types/components/combo-box/types";
+import { TeamData } from "./sign-in-team";
+export declare const mapTeamsToComboBoxItemModel: (teams?: TeamData[]) => ComboBoxItemModel[] | undefined;

package/dist/types/components/sign-in-team/sign-in-team.d.ts

@@ -0,0 +1,42 @@
+export declare class GxIdeUiSplash {
+    #private;
+    el: HTMLGxIdeSignInTeamElement;
+    /**
+     * This is a handover from "authStep" that allows updating descriptions once
+     * the slide is hidden. This enables a smooth transition between descriptions.
+     */
+    authStepInternal: AuthStep;
+    /**
+     * Defines if the main slide is visible or not. Used for smooth transitions
+     * between slides.
+     */
+    slideIsVisible: boolean;
+    /**
+     * The authentication step to display
+     */
+    readonly authStep: AuthStep;
+    authStepChanged(newAuthStep: AuthStep): void;
+    /**
+     * Callback executed when the user clicks the 'Continue' button
+     */
+    readonly continueCallback: (teamId: string) => Promise<void>;
+    /**
+     * Callback executed when the user click the "Sign In" button
+     */
+    readonly signInCallback: () => Promise<void>;
+    /**
+     * Array that contains the user's teams
+     */
+    readonly teams: TeamData[];
+    /**
+     * Callback executed when the user clicks on the "term and conditions" link
+     */
+    readonly termsCallback: () => Promise<void>;
+    componentWillLoad(): Promise<void>;
+    render(): any;
+}
+export type AuthStep = "signIn" | "selectUserTeam";
+export type TeamData = {
+    id: string;
+    name: string;
+};